hyva-compile-tailwind-css

frontendhyva-themes

Compile Tailwind CSS for Hyvä themes in Magento 2. Use when the user wants to build styles, generate CSS, compile Tailwind, run Tailwind, or create production/development stylesheets for a Hyvä theme. Also use when Tailwind classes are not taking effect or some styles appear missing after template changes — this typically means CSS needs to be recompiled. Triggers include "compile tailwind", "build styles", "generate css", "styles not working", "styles are missing", "styles not applied".

Install

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

SKILL.md

---name: hyva-compile-tailwind-cssdescription: Compile Tailwind CSS for Hyvä themes in Magento 2. Use when the user wants to build styles, generate CSS, compile Tailwind, run Tailwind, or create production/development stylesheets for a Hyvä theme. Also use when Tailwind classes are not taking effect or some styles appear missing after template changes — this typically means CSS needs to be recompiled. Triggers include "compile tailwind", "build styles", "generate css", "styles not working", "styles are missing", "styles not applied".requires: hyva-exec-shell-cmd, hyva-theme-list---

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

Related skills

vercel-react-best-practicesvercel-labs751KReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.vercel-composition-patternsvercel-labs361KReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.vercel-react-view-transitionsvercel-labs135KGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view pick-ui-libraryemilkowalski124KPick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.