home / skills / hyva-themes / hyva-ai-tools / hyva-compile-tailwind-css

hyva-compile-tailwind-css skill

safe

/skills/hyva-compile-tailwind-css

This skill compiles Tailwind CSS for Hyva themes in Magento 2, handling production builds and optional watch mode.

npx playbooks add skill hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

2.2 KB

---
name: hyva-compile-tailwind-css
description: Compile Tailwind CSS for Hyvä themes in Magento 2. This skill should be used when the user wants to build styles, generate CSS, compile Tailwind, run Tailwind, or create production/development stylesheets for a Hyvä theme. Triggers on phrases like "compile tailwind", "build styles", "generate css", "run tailwind", "build css", or "npm build for theme".
---

# 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".

```bash
# 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`

<!-- Copyright © Hyvä Themes https://hyva.io. All rights reserved. Licensed under OSL 3.0 -->

Overview

This skill compiles Tailwind CSS for Hyvä themes in Magento 2, supporting both production builds and development watch mode. It automates dependency checks, runs the correct npm commands, and verifies the compiled stylesheet is updated. Use it when you need reliable Tailwind builds for Hyvä frontend work.

How this skill works

The skill detects the environment and selects the proper command wrapper so npm runs in the right context. It locates the target Hyvä theme (preferring app/design/frontend unless you explicitly request vendor themes), ensures node_modules are present, then runs a production build or a watch session per your request. Finally, it confirms the compiled CSS at web/css/styles.css was updated by checking the file modification time.

When to use it

You want to produce a production-ready CSS build for a Hyvä theme (default).
You need a development watch mode with live Tailwind rebuilds.
You’ve updated Tailwind config, template classes, or theme styles and must regenerate CSS.
You need to verify that the theme’s web/css/styles.css was updated after a build.
You’re preparing static content deployment and want fresh compiled CSS.

Best practices

Default to production builds unless you explicitly request watch or live reload.
Only run npm install (npm ci) when node_modules is missing to save time.
Prefer themes in app/design/frontend; explicitly request vendor themes if needed.
After production build, run bin/magento setup:static-content:deploy when deploying to production.
Check the compiled file timestamp to confirm a successful build and clear browser cache if styles appear outdated.

Example use cases

Run a production Tailwind compile before a release to ensure styles.css is up to date.
Start watch mode while developing a Hyvä theme to get live Tailwind rebuilds as you edit templates.
Automate a CI step that checks for node_modules, runs npm ci if missing, and builds CSS.
When a site shows stale styles, rebuild Tailwind and verify the web/css/styles.css modification time.
Create a new child theme and run the Tailwind build to generate its initial stylesheet.

FAQ

What if no Hyvä theme is found in app/design/frontend?

The skill will offer to check vendor/hyva-themes or suggest creating a child theme. Explicitly allow vendor scanning if your theme lives there.

When should I run npm ci?

Run npm ci only if node_modules is missing in <theme-path>/web/tailwind. This avoids unnecessary installs and keeps builds fast.