mcpField
H
hyva-compile-tailwind-css

hyva-compile-tailwind-css

github.com/hyva-themes開発851.3k 回インストール13 週間前に更新
リポジトリ

hyva-compile-tailwind-css について

Magento 2 の Hyvä テーマ向けに Tailwind CSS をコンパイルするスキルです。テーマ開発者向けに、本番ビルドと開発時の監視モードを備え、実行前に環境とテーマを確認します。

主な機能

  1. 01本番 CSS ビルド
  2. 02開発時の監視モード
  3. 03環境に応じたコマンド設定
  4. 04Hyvä テーマの検出

活用シーン

  1. 01Hyvä テーマの CSS ビルド
  2. 02テーマ開発中のスタイル監視

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/hyva-compile-tailwind-cssを入力して読み込まれたか確認します。

詳細

Hyvä テーマ用の Tailwind CSS をコンパイルする

Magento 2 の Hyvä テーマ用に Tailwind CSS をコンパイルします。本番ビルドと開発用の監視モードの両方に対応しています。

ステップ 1：環境を検出してコマンドラッパーを設定する

hyva-exec-shell-cmd スキルを使用して環境を検出し、適切なコマンドラッパーを判断します。以下の npm コマンドはコアコマンドを示しているため、検出した環境に応じてラッパーを付けて実行してください。

ステップ 2：テーマを特定する

テーマのパスが指定されていない場合は、hyva-theme-list スキルを呼び出して利用可能なテーマを確認します。デフォルトでは、結果を app/design/frontend/ 内のテーマのみに絞り込みます。vendor/hyva-themes/ 内のテーマを対象にするには、ユーザーからの明示的なリクエストが必要です。

テーマが見つからない場合： app/design/frontend/ に Tailwind 設定を含む Hyvä テーマが見つからなかったことをユーザーに伝えます。代わりに vendor/hyva-themes/ を確認するか、まず hyva-child-theme スキルを使用して子テーマを作成するか、ユーザーに尋ねてください。

ステップ 3：依存関係をインストールしてビルドする

ユーザーが「watch」「watch mode」「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

ステップ 4：出力を確認する

コンパイル後の CSS の場所：<theme-path>/web/css/styles.css

更新日時を確認して、ファイルが更新されたことを確認します。

トラブルシューティング

  • node_modules が見つからない場合： npm ci を実行します
  • スタイルが古い場合： ブラウザーのキャッシュをクリアします。本番モードでは bin/magento setup:static-content:deploy を実行します

コメント

Markdown 対応