2025.02.01 - Shopify
ShopifyテーマにTailwind 4を導入する
弊社のプロダクト "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/components/ui/button.liquid
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-md transition-colors">
{{ label }}
</button>
{% render 'components/ui/button', label: 'カートに追加' %}
導入のメリット
コンポーネント化による効果
- 並列処理の最適化によるパフォーマンス向上
- キャッシュの効率的な活用
- コード最適化によるペイロードサイズの削減
Tailwindのメリット
- ビルド時のCSS最適化
- 未使用クラスの自動削除
- レンダリングブロッキングの軽減
- 開発体験の向上(特にNext.jsなどのモダンフレームワークを使用している場合)
むすび
コンポーネントの共通化は、サーバーサイドのレンダリング速度には大きな影響を与えないかもしれませんが、キャッシュの効率化など運用面でのメリットがあります。
また、Tailwindの導入はチーム開発においても大きな利点があるため導入を検討している方はぜひ試してみてください。
← Back to Blog