Shopify の既存テーマに Tailwind CSS を導入する方法

こんにちは、 Gaji-Labo 横田です。Eコマース用のプラットフォーム Shopify でのサイト構築で既存テーマ Debut に Tailwind CSS を導入したので、その方法を紹介します。

前提条件

• 既存のテーマ Debut をカスタマイズ元に使用
• オリジナルの CSS も追記するため、SCSS のコンパイルに Gulp を導入
  • Gulp に PostCSS を導入

こちらもご覧ください。

Tailwind CSS をインストールする

Tailwind CSS パッケージをインストールします。Gulp ですでに PostCSS を導入しているため、Tailwind CSS の最新版（2022年1月現在は v3.0 が最新）のみをインストール。

% npm install -D tailwindcss@latest

package.json で確認できます。

  "devDependencies": {
    "tailwindcss": "^3.0.16",

設定ファイル tailwind.config.js を作成

Tailwind CSS の 設定ファイルを作成します。

% npx tailwindcss init

tailwind.config.js に設定を追加

Tailwind CSS の 設定ファイルに、以下を追加します。

パージの対象となるファイル

クラス名を書くパージ対象となるファイルを全て追加します。

module.exports = {
  content: [
    "./layout/*.liquid",
    "./templates/*.{liquid, json}",
    "./sections/*.liquid",
    "./snippets/*.liquid",
    "./assets/*.{liquid, js}",
  ],

グロブと拡張子のパターンを { } で指定することができます。

詳細は https://tailwindcss.com/docs/content-configuration

prefix

前提条件にも記載したように、既存のテーマである Debut をカスタマイズします。テーマのクラス名とコンフリクトしないよう、Tailwind CSS のクラス名には prefix が付くようにしておくと便利です。

module.exports = {
  prefix: "[prefix]-",

Just-in-Time モード

Just-in-Time モードは、全ての Tailwind CSS のユーティリティをビルドするのではなく、テンプレートで使用されたユーティリティのみを事前に検出し、ビルド生成ができるというものです。Tailwind CSS v3.0 ではデフォルトとなりましたので設定の追記は不要ですが、それ以前のバージョンを使用する場合では以下のような追記が必要になります。

module.exports = {
  mode: "jit",

Tailwind CSS の読み込み

以下のように CSS ファイルを作成してTailwind CSS を読み込みます。

@tailwind components;
@tailwind utilities;

公式ですと @tailwind base; も読み込んでいますが、既存のテーマである Debut にも影響してしまうため、今回は外しています。

Gulp でSCSS をコンパイルするので、theme.scss 等で上記 CSS ファイルをインポートしておきます。

@import 'settings/theme';

@import 'settings/tailwind';

ビルドコマンドの設定

前提条件にあるように Gulp と PostCSS を導入しているため、gulpfile.js にコマンドを設定します。必要な箇所だけ抜粋します。

const tailwindcss = require("tailwindcss"); 
const tailwindConfig = require("./tailwind.config.js");

function css() {
  return gulp
    .pipe(
      postcss([
        tailwindcss(tailwindConfig),
      ])
    )
}
...

こんな感じですね。

まとめ

これで Shopify の既存テーマ Debut に Tailwind CSS を導入できました。liquid ファイルの任意の場所に .prefix-font-bold と書いてビルドさせれば assets/theme.css にTailwind CSS で使用したクラスだけが追加されました！

.prefix-invisible{
  visibility:hidden;
}
.prefix-font-bold {
  font-weight:700;
}

Shopify の既存テーマに Tailwind CSS を導入したい方の参考になれば幸いです。

森田の Tailwind CSS 紹介記事も合わせてご覧ください。

Shopifyでのサイト構築やテーマ開発に興味がある方、実践でのポイントを吸収したいと思っている方などにおすすめの内容です。