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".
How do I install this agent skill?
npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-cssIs this agent skill safe to install?
- Gen Agent Trust Hubpass
This skill provides a standard and safe procedure for compiling Tailwind CSS for Hyvä themes in Magento 2. It utilizes official Node.js package management tools and vendor-specific utility skills to automate build processes.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerwarn
1/1 file flagged
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
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
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/hyva-themes/hyva-ai-tools/hyva-compile-tailwind-css">View hyva-compile-tailwind-css on skillZs</a>