Hyva Compile Tailwind Css
- 786 installs
- 78 repo stars
- Updated July 31, 2026
- hyva-themes/hyva-ai-tools
hyva-compile-tailwind-css is a Hyvä AI Tools skill that compiles Tailwind CSS for Hyvä themes in Magento 2 for developers whose Tailwind classes are missing or not updating after template changes.
About
hyva-compile-tailwind-css is a Hyvä AI Tools skill that compiles Tailwind CSS for Hyvä themes running on Magento 2. It handles both development and production stylesheet generation when developers need to build styles, generate CSS, or fix Tailwind classes that stopped applying after template edits. The skill requires hyva-exec-shell-cmd and hyva-theme-list as prerequisites and triggers on phrases like compile tailwind, build styles, generate css, styles not working, or styles are missing. Developers on Magento 2 Hyvä storefronts reach for this skill whenever UI classes fail to render because the CSS pipeline was not recompiled after template changes.
- Compiles Tailwind CSS for both production builds and development watch mode
- Automatically detects environment and sets correct command wrapper using hyva-exec-shell-cmd
- Discovers available Hyvä themes via hyva-theme-list skill when no path is provided
- Filters themes to app/design/frontend/ by default and handles vendor/hyva-themes/ on request
- Handles the common case where Tailwind classes stop taking effect after template edits
Hyva Compile Tailwind Css by the numbers
- 786 all-time installs (skills.sh)
- +29 installs in the week ending Aug 2, 2026 (Skillselion tracking)
- Ranked #446 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-cssAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 786 |
|---|---|
| repo stars | ★ 78 |
| Last updated | July 31, 2026 |
| Repository | hyva-themes/hyva-ai-tools ↗ |
How do you compile Tailwind CSS for Hyvä Magento 2 themes?
Compile Tailwind CSS for Hyvä themes in a Magento 2 store when styles are missing or not updating after template changes.
Who is it for?
Magento 2 developers working on Hyvä themes who see missing Tailwind styles or stale CSS after editing PHTML or layout templates.
Skip if: Stores not using Hyvä themes or Magento 2, or teams fixing PHP backend logic unrelated to Tailwind compilation, should skip hyva-compile-tailwind-css.
When should I use this skill?
User asks to compile Tailwind, build styles, generate CSS, or reports Hyvä theme styles missing or not applied after template changes.
What you get
Recompiled Tailwind CSS development and production stylesheets for the target Hyvä Magento 2 theme.
- compiled Tailwind CSS stylesheets
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.
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 watchStep 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 -->
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFAQ
When should I run hyva-compile-tailwind-css?
Run hyva-compile-tailwind-css when Tailwind classes are missing or not updating after Hyvä template changes in Magento 2, or when you need to build development or production stylesheets for a Hyvä theme.
What skills does hyva-compile-tailwind-css depend on?
hyva-compile-tailwind-css requires hyva-exec-shell-cmd and hyva-theme-list as prerequisites. Those companion skills provide shell execution and theme discovery before Tailwind CSS compilation runs.