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 c
By hyva-themes · 1,065 installs
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css
Source repository · Upstream listing
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".
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