mcpField
H
hyva-compile-tailwind-css

hyva-compile-tailwind-css

github.com/hyva-themesDevelopment851.3k installsUpdated 13w ago
Repository

About hyva-compile-tailwind-css

A skill for compiling Tailwind CSS in Magento 2 Hyvä themes, for developers building or updating theme styles. It supports production builds and development watch mode, and checks the environment and theme before running npm commands.

Key features

  1. 01Production CSS builds
  2. 02Development watch mode
  3. 03Environment-aware command setup
  4. 04Hyvä theme discovery

Use cases

  1. 01Build CSS for a Hyvä theme
  2. 02Watch styles during theme development

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css

After installing, type/hyva-compile-tailwind-cssin Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported