How do I install the Hyva Compile Tailwind CSS skill?

Run npx skillmds@latest add hyva-themes/hyva-compile-tailwind-css in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Hyva Compile Tailwind CSS safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Hyva Compile Tailwind CSS?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Hyva Compile Tailwind CSS free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Hyva Compile Tailwind CSS?

hyva-themes (@hyva-themes) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Hyva Compile Tailwind CSS by hyva-themes

Name: Hyva Compile Tailwind CSS
Rating: 4.2 (5 reviews)
Author: hyva-themes

Hyva Compile Tailwind CSS

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".

hyva-themes Updated Sep 9, 2026

File contents

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

---name: hyva-compile-tailwind-cssdescription: 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".--- # 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". ```bash # 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`

Frequently asked questions