hyva-compile-tailwind-css — Claude Code skill: install & usage
Builds Tailwind CSS stylesheets for Hyvä themes in Magento 2. It triggers production builds or watch mode when updated utility classes fail to render on the storefront.
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a claude-codeWhat hyva-compile-tailwind-css does
This skill handles Tailwind compilation across Magento 2 storefront themes. It targets theme directories under app/design/frontend/, inspects the web/tailwind directory, and runs npm ci if dependencies are missing. Standard execution triggers a production build via npm run build. It switches to npm run watch only when live reload or watch mode is requested directly.
Running this tool strictly requires two companion skills: hyva-exec-shell-cmd to wrap terminal commands for the active container or shell, and hyva-theme-list to locate themes. Once the process finishes, the assistant verifies that <theme-path>/web/css/styles.css received updates. If classes still fail to show up in production, deploy static content with bin/magento setup:static-content:deploy.
What it helps with
- compile Tailwind CSS stylesheets for Hyvä storefronts
- start live watch mode during theme template development
- fix missing styles after modifying Magento 2 phtml templates
- install missing npm dependencies before running stylesheets build
Example prompts for the agent
- Compile the Tailwind CSS styles for our Hyvä theme
- My Tailwind classes are not showing up on the page. Rebuild the CSS
- Start watch mode for the Hyvä theme Tailwind assets
How to install hyva-compile-tailwind-css
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a claude-code2Manually: put the files in place
~/.claude/skills/hyva-compile-tailwind-css/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/hyva-compile-tailwind-css/
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a codex2Manually: put the files in place
.agents/skills/hyva-compile-tailwind-css/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a cursor2Manually: put the files in place
.cursor/skills/hyva-compile-tailwind-css/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install hyva-themes/hyva-ai-tools hyva-compile-tailwind-css2Manually: put the files in place
.github/skills/hyva-compile-tailwind-css/SKILL.md1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a gemini-cli2Platform CLI
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-compile-tailwind-cssManually: put the files in place
.devin/skills/hyva-compile-tailwind-css/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about hyva-compile-tailwind-css
How do I install hyva-compile-tailwind-css in Claude Code?
Run npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a claude-code. The definition will be added to ~/.claude/skills/hyva-compile-tailwind-css/SKILL.md.
What does hyva-compile-tailwind-css do?
It detects your Hyvä theme location, ensures node packages exist, and generates the compiled styles.css file via npm scripts.
What prerequisites does this skill require?
It depends on hyva-exec-shell-cmd for executing environment-wrapped commands and hyva-theme-list for finding theme paths.
