hyva-themes/hyva-compile-tailwind-css
skills/hyva-compile-tailwind-css/SKILL.md
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 --global
skillsauthnpx skillsauth add hyva-themes/hyva-ai-tools hyva-compile-tailwind-cssInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 5, 2026, 8:54 AM120.6s1 file scanned
SKILL.md
- name:
- hyva-compile-tailwind-css
- description:
- 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
hyva-themes/hyva-ui-component
documentation
VerifiedTrustedCommunity
Apply Hyva UI template-based components to a Hyvä theme. This skill should be used when the user wants to add, install, or apply a Hyva UI component (such as header, footer, gallery, menu, minicart, etc.) to their Hyvä theme. It lists available non-CMS components and their variants, displays component README instructions, and copies component files to the theme directory.
65SKILL.mdUpdated May 5, 2026
hyva-themes/hyva-theme-list
data-ai
VerifiedTrustedCommunity
List all Hyvä theme paths in a Magento 2 project. This skill should be used when the user wants to find Hyvä themes, list available themes, discover theme paths, or when other skills need to locate Hyvä themes. Trigger phrases include "list hyva themes", "find themes", "show themes", "available themes", "theme paths".
65SKILL.mdUpdated May 5, 2026
hyva-themes/hyva-render-media-image
development
VerifiedTrustedCommunity
Generate responsive image code for Hyvä Theme templates using the Media view model. This skill should be used when the user wants to render images in a Hyvä template, create responsive picture elements, add hero images, product images, or any image that needs responsive breakpoints. Trigger phrases include "render image", "add image to template", "responsive image", "picture element", "hero image", "responsive banner", "image for mobile and desktop", or "banner image".
65SKILL.mdUpdated May 5, 2026
hyva-themes/hyva-playwright-test
development
VerifiedTrustedCommunity
Write Playwright tests for Hyvä themes with Alpine.js components. This skill should be used when writing e2e tests, creating page objects, or debugging selector issues in Playwright tests for Hyvä Magento storefronts. Trigger phrases include "write playwright test", "playwright alpine", "test hyva page", "e2e test", "playwright selector".
65SKILL.mdUpdated May 5, 2026