使用方法
- 复制安装命令，在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物，并对照来源检查输出。
npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。
按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。
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 watchStep 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 -->
