Web制作・デジタルソリューション

弊社のプロダクト "PASS COFFEE" は、これまでShopifyのヘッドレスコマースであるHydrogenで運用してきました。しかし、運用規模と保守コストのバランスが取れず、開発工数の負担が大きくなってきました。

そこで、Liquidベースのテーマへ移行することを決断しました。コンポーネント指向で開発を進めるため、Liquidでも共通パーツをコンポーネント化し、効率的に開発を行います。

その一環として、ShopifyテーマにTailwind 4を導入しました。今回はその方法をご紹介します。

環境

Shopifyテーマ: Rise

開発環境: Macbook Pro M4

導入の流れ

npmの初期化
必要なライブラリのインストール
- concurrently（複数のコマンドを同時実行）
- @tailwindcss/cli（TailwindのCLIツール）
- tailwindcss（TailwindCSSフレームワーク）
input用CSSファイルの作成
package.jsonへのコマンド追加
開発サーバーの起動
theme.liquidへのCSS参照追加

※環境に応じて.shopifyignoreや.gitignoreの設定も必要です。

実装手順

1. npmの初期化とライブラリのインストール

// npmの初期化
npm init -y
// ライブラリのインストール
npm install tailwindcss @tailwindcss/cli
npm install concurrently -D

2. input用CSSファイルの作成

/assets/tailwind.input.cssを作成し、以下の内容を追加します

@import "tailwindcss";

3. package.jsonの設定

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "concurrently \"shopify theme dev -e development\" \"npx @tailwindcss/cli -i ./assets/tailwind.input.css -o ./assets/tailwind.output.css --watch\""
}

4. 開発サーバーの起動

npm run dev

./assets/tailwind.output.cssが生成されていることを確認する。

5. theme.liquidへの追加

</head>タグの直前に追加する

{{ 'tailwind.output.css' | asset_url | stylesheet_tag }}

コンポーネントの使用例

// snippets/sample-button.liquid
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors">
  {{ label }}
</button>
{% render 'sample-button', label: 'サンプルボタン' %}

導入のメリット

コンポーネント化による効果

並列処理の最適化によるパフォーマンス向上
キャッシュの効率的な活用
コード最適化によるペイロードサイズの削減

Tailwindのメリット

ビルド時のCSS最適化
未使用クラスの自動削除
レンダリングブロッキングの軽減
開発体験の向上（特にNext.jsなどのモダンフレームワークを使用している場合）

むすび

コンポーネントの共通化は、サーバーサイドのレンダリング速度には大きな影響を与えないかもしれませんが、キャッシュの効率化など運用面でのメリットがあります。

また、Tailwindの導入はチーム開発においても大きな利点があるため導入を検討している方はぜひ試してみてください。

2025.3.2 追記

shopify theme devをする際に複数のストアやアカウントを使用しているとログインできないことがあるので末尾に`-s [SHOPURL]`付けるようにしました。

shopify theme dev -e development -s [SHOPURL]

ShopifyテーマにTailwind 4を導入する

PRODUCTS

TOPICS

環境