hyva-compile-tailwind-css

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Compile Tailwind CSS for Hyvä Themes

为Hyvä主题编译Tailwind CSS

Compiles Tailwind CSS for Hyvä themes in Magento 2. Handles both production builds and development watch mode.

为Magento 2中的Hyvä主题编译Tailwind CSS，同时支持生产环境构建和开发环境监听模式。

Step 1: Detect Environment & Set Command Wrapper

步骤1：检测环境并设置命令包装器

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.

使用

hyva-exec-shell-cmd

技能检测环境，确定合适的命令包装器。以下所有npm命令均展示核心命令，请根据检测到的环境进行包装。

Step 2: Identify Theme

步骤2：识别主题

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.

如果未提供主题路径，调用

hyva-theme-list

技能发现可用主题。默认情况下，仅筛选

app/design/frontend/

目录下的主题。

vendor/hyva-themes/

目录下的主题需要用户明确请求才会查询。

如果未找到主题： 告知用户在

app/design/frontend/

目录下未找到带有Tailwind配置的Hyvä主题。询问用户是否要改为检查

vendor/hyva-themes/

目录，或是是否需要先使用

hyva-child-theme

技能创建子主题。

Step 3: Install Dependencies & Build

步骤3：安装依赖并构建

Default to production build unless user explicitly requests "watch", "watch mode", or "live reload".

bash

undefined

默认采用生产环境构建，除非用户明确请求“watch”、“watch mode”或“live reload”。

bash

undefined

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

undefined

cd <theme-path>/web/tailwind && npm run watch

undefined

Step 4: Verify Output

步骤4：验证输出

Compiled CSS location:

<theme-path>/web/css/styles.css

Confirm the file was updated by checking its modification time.

编译后的CSS位置：

<theme-path>/web/css/styles.css

通过检查文件的修改时间确认文件已更新。

Troubleshooting

故障排除

Missing node_modules: Run
```
npm ci
```
Outdated styles: Clear browser cache; in production mode run
```
bin/magento setup:static-content:deploy
```

缺少node_modules： 运行
```
npm ci
```
样式过时： 清除浏览器缓存；在生产模式下运行
```
bin/magento setup:static-content:deploy
```