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 紹介記事も合わせてご覧ください。

この機会に、オンラインで気軽に面談してみませんか?

現在弊社では一緒にお仕事をしてくださるエンジニアさんやデザイナーさんを積極募集しています。まずはカジュアルな面談で、お互いに大事にしていることをお話できたらうれしいです。詳しい応募要項は以下からチェックしてください。

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


投稿者 Yokota Tomoko

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームを前に進めるためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。