Hyva Compile Tailwind Css

hyva-themes/hyva-ai-tools/skills/hyva-compile-tailwind-css

by hyva-themesa28a3333bcfae05dcba07e88f38a5ff9579903c7No licenseListed Oct 9, 2026Updated Oct 9, 2026

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

Instructions onlySoftware Development DevOps & Cloud

AI-generated overview

Compiles Tailwind CSS for Hyvä themes in Magento 2, in production or watch mode.

What it does: This skill guides an agent through compiling Tailwind CSS for a Hyvä theme in Magento 2. It detects the environment, identifies the target theme, installs npm dependencies when node_modules is missing, and runs either a production build or watch mode. It then verifies that the compiled stylesheet at the theme's web/css/styles.css path was updated.
When to use it: Use it when a user wants to build styles, generate CSS, or compile Tailwind for a Hyvä theme, or when Tailwind classes are not taking effect and styles appear missing after template changes. It also applies when a production or development stylesheet is needed for such a theme.
Requirements: Requires a Magento 2 project with a Hyvä theme containing a Tailwind configuration, Node.js and npm, and the theme's web/tailwind directory with its npm scripts. It depends on the hyva-exec-shell-cmd and hyva-theme-list skills for environment detection and theme discovery. It ships no scripts; it is instructions only.

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 missingif [ ! -d "<theme-path>/web/tailwind/node_modules" ]; then  cd <theme-path>/web/tailwind && npm cifi
# 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

# Install deps only if node_modules missingif [ ! -d "<theme-path>/web/tailwind/node_modules" ]; then  cd <theme-path>/web/tailwind && npm cifi
# 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

Source and attribution

Source:hyva-themes/hyva-ai-toolsinskills/hyva-compile-tailwind-cssat commita28a333

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Hyva Compile Tailwind Css

Compile Tailwind CSS for Hyvä Themes

Step 1: Detect Environment & Set Command Wrapper

Step 2: Identify Theme

Step 3: Install Dependencies & Build

Step 4: Verify Output

Troubleshooting

Source and attribution

More from hyva-themes/hyva-ai-tools

Hyva Playwright Test

Hyva Theme List

Hyva Render Media Image

Hyva Create Module

Hyva Cms Custom Field

Hyva Cms Component

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices