Hyva Compile Tailwind Css

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

作者 hyva-themesa28a3333bcfae05dcba07e88f38a5ff9579903c7無授權條款收錄於 2026年10月9日更新於 2026年10月9日

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

AI 產生的概覽

為 Magento 2 的 Hyvä 主題編譯 Tailwind CSS,支援正式建置或監看模式。

功能
此技能引導代理為 Magento 2 的 Hyvä 主題編譯 Tailwind CSS。它會偵測環境、確認目標主題、在缺少 node_modules 時安裝 npm 相依套件,並執行正式建置或監看模式。接著它會確認主題 web/css/styles.css 路徑下的已編譯樣式表是否已更新。
適用情境
當使用者想要建置樣式、產生 CSS 或為 Hyvä 主題編譯 Tailwind 時使用;也適用於範本變更後 Tailwind 類別未生效、樣式似乎遺漏的情況。需要為這類主題產生正式或開發樣式表時同樣適用。
執行需求
需要一個 Magento 2 專案,其中包含具備 Tailwind 設定的 Hyvä 主題、Node.js 與 npm,以及主題的 web/tailwind 目錄與其 npm 指令碼。它依賴 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".

bash
# Install deps only if node_modules missingif [ ! -d "<theme-path>/web/tailwind/node_modules" ]; then  cd <theme-path>/web/tailwind && npm cifi
# 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 -->

來源與署名

來源:hyva-themes/hyva-ai-tools位於skills/hyva-compile-tailwind-css提交a28a333

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架