Hyva Compile Tailwind Css

Handles Tailwind CSS compilation for Hyvä themes in Magento 2, which you'll need whenever you modify templates or notice styles not taking effect. It defaults to production builds but supports watch mode if you ask explicitly. The skill auto-detects your environment (Docker, native, etc.), finds themes in app/design/frontend, and runs npm commands in the right directory. One nice touch: it only installs dependencies if node_modules is missing, so you're not waiting around unnecessarily. If you're working with Hyvä and changing markup, you'll use this constantly since Tailwind needs recompilation to pick up new classes.

skills.sh installs: 1.3K
GitHub stars: 85
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css --agent claude-code

Installs into .claude/skills of the current project.

Files

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.