Megu

Shopify Theme開発にTailwindCSSを導入する

2022.02.17

Shopify

Tailwind CSS

Shopify Theme開発を行っているとCSSの命名や既存のクラス・CSSの把握などやることがたくさんです。
簡単な機能追加やデザインの調整であれば、問題ないのですがストアまるまる構築するとなるとかなり時間の掛かる作業になります。
そこで今回は、Shopify Themeの開発環境にTailwindCSSを導入する方法をメモ程度に残します。

大まかな処理のイメージ

① TailwindCSSでクラスの指定、CSSの調整を行う。
② 常にTailwindCSSの追加を検知し、通常のCSSへ変換する
③ 通常のCSSをThemeで読み込んで使用

コンパイル済みのCSSをShopify本番環境では使うようにします。

前提条件

・Shopfiy CLIがダウンロードされておりローカルで開発ができる人。
・Node npmの環境がある方。
・MacOSでの使用を示します。

基本的な設定

① Shopify CLIのインストール
② ご自身のShopifyログインする
③ 導入するテーマをPullしてくる
④ ローカルでServerが立ち上がるか確認する

④まで完了したらShopify CLIを使った基本的な開発ができるようになります。

Shopify GitHub integration

① 通常のGithubのリポジトリを作るようにリポジトリを作成し、先程Pullしてきた（基本的な設定③）のコードをリモートに上げておく。
② Shopify StoreとGithubのリポジトリを連携する

ここからまたままたローカルの作業に戻ります。

Package.jsonを作成する

npm init -y

package.jsonができているかの確認をする。

{
  "name": "shopify-tailwind-test-2",
  "version": "1.0.0",
  "description": "description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

TailwindCSS Packageをインストール・設定する

↓インストール（公式）

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.jsができていることを確認する（v3の場合）
※ tailwind css v3とv2ではconfig周りの設定が異なるので注意

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

TailwindCSSのコンパイル対象になるファイルをconfigへ設定する

module.exports = {
  content: [
    "./layout/*.{liquid,js}",
    "./sections/*.{liquid,js}",
    "./snippets/*.{liquid,js}",
    "./templates/*.{liquid,js}",
    "./templates/customers/*.{liquid,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Shopify Theme内の既存のクラスとかぶらないようにするために、Prefixを指定する。

module.exports = {
  prefix: "tw-",
  content: [
    "./layout/*.{liquid,js}",
    "./sections/*.{liquid,js}",
    "./snippets/*.{liquid,js}",
    "./templates/*.{liquid,js}",
    "./templates/customers/*.{liquid,js}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

TailwindCSSのInput・Outputファイルを作成する

templateやsectionなどと同じ階層に、_css内にtailwind.cssファイルを作成する

mkdir _css && touch _css/tailwind.css

_css/tailwind.css内にTailwind directivesを追加する
※ @tailwind base は既存のテーマのスタイルに影響があるので、追加しないことをすすめる。

@tailwind base;
@tailwind components;
@tailwind utilities;

Inputの内容をOutput用のCSSに書き出す

npx tailwindcss -i ./_css/tailwind.css -o ./assets/tailwind.css

theme.liquidにCSSを追加する

<head>
  ...
  {{ "tailwind.css" | asset_url | stylesheet_tag }}
  ...
</head>

npm scriptの設定をする

{
  "name": "xxxx",
  "version": "1.0.0",
  "description": "xxxx",
  "main": "index.js",
  "scripts": {
    "dev": "tailwindcss -i ./_css/tailwind.css -o ./assets/tailwind.css", //アウトプットファイルにコンパイル結果を出力する
    "dev:watch": "tailwindcss -i ./_css/tailwind.css -o ./assets/tailwind.css -w", // 監視し続けてtw-xxのtailwind classが追加される度に自動的にcompilする
    "build": "tailwindcss -i ./_css/tailwind.css -o ./assets/tailwind.css --minify",
    "help": "tailwindcss --help"
  },
  "repository": {
    "type": "git",
    "url": "xxxx"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "xxxx"
  },
  "homepage": "xxxx",
  "devDependencies": {
    "tailwindcss": "^3.0.23"
  }
}

補足

.gitignore ファイルを作成しnode_modulesを除外
.prettierignore で　.liquidを除外しておくと良いかも（Prettier使用勢）

/**/*.liquid

.shopifyignoreでShopifyのテーマに不要なファイルを除外する必要がある。

.gitignore // 必須
.prettierignore //使っていれば

package.json　// 必須
package-lock.json　// 必須

postcss.config.js　// 必須
tailwind.config.js　// 必須

_css/tailwind.css　// 必須

README.md // 必須

Prefix をパースするには

Tailblocksなどの便利なTailwindCSS製のコンポーネントを使用する際にPrefixを設定していると置換作業が発生して不便ですよね...
折角、便利なTailwindCSSを導入したのに、無駄な作業には時間を使いたくないものです。
TailwindCSS Prefix Parserというサイトを作りました。
指定したPrefixをTailwindCSSのクラス名の接頭辞として置換します。
ぜひ、使ってみて下さい。