# hyva-compile-tailwind-css

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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1300 installs · ★ 85
- Author: hyva-themes
- License: OSL-3.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/hyva-themes/hyva-ai-tools/tree/HEAD/skills/hyva-compile-tailwind-css/SKILL.md
- Updated: 2026-07-31
- HTML: https://affpapa.org/en/nevibecode/skills/hyva-compile-tailwind-css

## What it 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`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/hyva-compile-tailwind-css/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/hyva-compile-tailwind-css/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/hyva-compile-tailwind-css/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/hyva-compile-tailwind-css/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install hyva-themes/hyva-ai-tools hyva-compile-tailwind-css
```

2. **Manually: put the files in place**
- File: `.github/skills/hyva-compile-tailwind-css/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-compile-tailwind-css
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/hyva-compile-tailwind-css/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/hyva-themes/hyva-ai-tools/tree/HEAD/skills/hyva-compile-tailwind-css/SKILL.md

## When to use it
- 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
- 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

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [hyva-themes/hyva-ai-tools](https://affpapa.org/en/nevibecode/by/hyva-themes/hyva-ai-tools.md) — 5 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md