SkillsAdd

hyva-themes/hyva-ai-tools

hyva-compile-tailwind-css

Compile Tailwind CSS for Hyvä themes in Magento 2.

Trending #8297 Hot #954 First seen Jan 27, 2026
8-week activity · all time api

Installation

$ npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css
View on skills.sh ↗ GitHub repository ↗

Summary

  • Compile Tailwind CSS for Hyvä themes in Magento 2.
  • Use when the user wants to build styles, generate CSS, compile Tailwind, run Tailwind, or create production/development stylesheets for a Hyvä theme.
  • Also use when Tailwind classes are not taking effect or some styles appear missing after template changes — this typically means CSS needs to be recompiled.
  • Triggers include "compile tailwind", "build styles", "generate css", "styles not working", "styles are missing", "styles not applied".

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Shared topics
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Shared topics
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
azure-enterprise-infra-planner Shared topics
microsoft/azure-skills

Architect and provision enterprise Azure infrastructure from workload descriptions. For cloud a…

402.8K installs

Also in this package

Other skills from hyva-themes/hyva-ai-tools · top by installs.

npx skills add hyva-themes/hyva-ai-tools
hyva-child-theme 1.1K hyva-alpine-component 1.1K hyva-exec-shell-cmd 1.1K hyva-render-media-image 1K hyva-ui-component 1K hyva-playwright-test 9 hyva-create-module 9 hyva-theme-list 9 hyva-cms-component 7 hyva-cms-custom-field 7

Browse all from hyva-themes/hyva-ai-tools

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

Stars 83
License LICENSE.txt
Default branch main
Open issues 1
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,433 B
  • docs SUMMARY.md 526 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 1,049 installs

SKILL.md

Compile Tailwind CSS for Hyvä Themes

Compiles Tailwind CSS for Hyvä themes in Magento 2. Handles both production builds and development watch mode.

Step 1: Detect Environment & Set Command Wrapper

Use the hyva-exec-shell-cmd skill to detect the environment and determine the appropriate command wrapper. All npm commands below show the core command; wrap them according to the detected environment.

Step 2: Identify Theme

If no theme path provided, invoke the hyva-theme-list skill to discover available themes. Filter the results to only include themes in app/design/frontend/ by default. Themes in vendor/hyva-themes/ require explicit user request.

If no themes found: Inform the user that no Hyvä themes with Tailwind configuration were found in app/design/frontend/. Ask if they want to check vendor/hyva-themes/ instead, or if they need to create a child theme first using the hyva-child-theme skill.

Step 3: Install Dependencies & Build

Default to production build unless user explicitly requests "watch", "watch mode", or "live reload".

# Install deps only if node_modules missing
if [ ! -d "<theme-path>/web/tailwind/node_modules" ]; then
  cd <theme-path>/web/tailwind && npm ci
fi

# Production build (default)
cd <theme-path>/web/tailwind && npm run build

# OR watch mode (only if explicitly requested)
cd <theme-path>/web/tailwind && npm run watch

Step 4: Verify Output

Compiled CSS location: <theme-path>/web/css/styles.css

Confirm the file was updated by checking its modification time.

Troubleshooting

  • Missing node_modules: Run npm ci
  • Outdated styles: Clear browser cache; in production mode run bin/magento setup:static-content:deploy

<!-- Copyright © Hyvä Themes https://hyva.io. All rights reserved. Licensed under OSL 3.0 -->