[Shopify]ストアにTailwind CSSを適用する方法

今回はShopifyストアに昨今話題のTailwindを適用する方法について書いていきます。

ちなみに実を言うと僕自身まだShopify CLIに慣れている訳ではないので、この記事ではtheme kitとnpmを使用してTailwindを適用していきます。

Tailwind CSSとは何なのか？

まず最初にTailwind CSSとは何かについて軽く説明します。

Tailwindはユーティリティファーストという考え方を利用しており、慣れてしまえばCSSでのスタイリングを非常に効率良くできるという利点があります。

例えば、Shopifyのストア開発をしていると当然CSSを編集する機会があると思うのですが最終的にCSSファイルを見返してみると同じようなスタイル編集を何度も書いてしまっていたり、共通化できるクラスがあったりとCSSファイルでのスタイル調整は無駄が多くなってしまう傾向がありました。

しかし、Tailwindのようなライブラリを使用すると "bg-white" というクラスをHTML要素につけると背景白にする。 "bg-black" だと背景黒になど、Tailwindで定義されているクラスをHTML要素につけて、開発者側でCSSを定義するのは最小限にしよう！といった概念があります。（ちょっとBootstrapに近い気がします。）

そして、TailwindはReactとの親和性も高いようなので今後Shopifyストア開発で使われる場面が多くなってくるのではないかなと個人的には思っています！

Tailwind CSSをShopifyストアに適用する方法

それでは早速 Tailwind CSSをShopifyストアに適用する手順について書いていきます。

Theme kit と npm はインストールされている前提で進めていくので、まだそちらの設定ができていない方は先にtheme kitとnpmを使える段階にすることをお勧めします。（なくても大体の流れは掴めると思いますので、そのまま読み進めていただいても問題ないです。）

まずターミナルを開いて該当ストアのテーマフォルダに進みtheme watch しましょう。

theme watch -e "development（config.ymlで設定した名前）"

そして別ウィンドウでターミナルを再度開き、同じく該当ストアのテーマフォルダに移動します。新しく開いた方のターミナルで package.jsonファイルを作成します。既にある場合はこの手順は割愛でOKです。

npm init -y

すると下記のように package.json ファイルが作成されました。

Tailwind CSSのインストールと設定

次に Tailwind CSSをインストールしましょう。

npm install -D tailwindcss

npx tailwindcss init

をターミナルで打ち込みます。

これでtailwindがインストールされました。tailwind.config.js というファイルが生成されていたら成功です！

上記 tailwind.config.jsファイルの設定を書き換えて適用されるファイルを指定します。

という部分を書き加えて下記のようにしましょう。

ちなみにprefixというのはtailwind classの前にtw-をつけますよ〜という指示を出しています。このprefixを使うことで既存CSSとのコンフリクトを防ぐことができます！

tailwind CSS のフォルダー作成

次に"css"というフォルダを作成し、配下に"tailwind.css"というファイルを作成します。

その中には下記のテキストをペーストしましょう。

こんな感じになります。

package.jsonファイルの設定

次にpackage.jsonファイルに

"build": "npx tailwindcss -i css/tailwind.css -o assets/tailwind.css.liquid"

という1行を追加します。下記のようになる想定です。

これで一通り設定は完了しました！

ターミナルに戻って

npm run build

を実行すると、、、

assetフォルダの中に "tailwind.css.liquid" が作成されました！おめでとうございます！！

最後にこのファイルをtheme.liquid上で読み込みましょう。

これで 例えばフォントを太くしたい際はHTML要素に"tw-font-semibold"というクラスをつけるだけでfont-wieghtを600にすることができました！

とてもとても便利です！！

Tailwindのクラス名は下記から参照できますのでぜひ色々試してみてください。

https://tailwindcss.com/docs/aspect-ratio

Tailwind CSSを使用してShopifyストア開発をする まとめ

 以上、Tailwind CSS をShopifyストアに適用する方法でした！思ったよりも簡単に使用できそうで、慣れると開発が爆速で進みそうだなぁという印象でした。

また将来的にReactもゴリゴリに使用していきたいので親和性が高そうなtailwindは勉強しておいても損はなさそうなので僕自身も勉強進めていきたいと思いました。

それでは最後までお読みいただき、ありがとうございました！本日も良い1日を！