GatsbyにTailwind CSSを導入する

Tailwind CSSとは

一言で言うとまあCSSフレームワークなのですが、BootstrapやBulmaといったものとは少し異なります。 例えば、CSSフレームワークでよくありがちな、角が少し丸まった、背景に色がついていて、マウスホバーすると色が変わる...といったボタンを作る場合、Bootstrapでは以下のようになります。

<button type="button" class="btn btn-primary">ボタン</button>

予め用意されたクラスを書いて一発ドンです。 一方、Tailwind CSSの場合は以下のようになります。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">ボタン</button>

Bootstrapと比べるとかなり長ったらしいですね... それぞれのクラスは以下のような意味を持っています。

と直接CSSを書いている感覚に近いようなことをしています。 なんだこれ！と思うかもしれませんが、Tailwind CSSの公式ドキュメントには以下のようなメリットが挙げられています。

メリット

• クラス名を考えるのに余計な労力を使う必要がない
• CSSが肥大化しない
• 変更を加えるのが怖くない

普段あまりCSSをゴリゴリ書くことはないのですが、 確かに、さっきmodalクラス付けたけど別のスタイルのモーダル必要だからさっきのクラス名も変えとくか...とか このCSSファイル変更したいけど、どこまで影響範囲あるか分からん... みたいなこと多々あります。 そういったことを解消してくれるのですね。

あと、個人的に予めデザインされた味気ないパーツよりも、自分でカスタムしていきたい派なので、そこもGOODです。

Gatsby（React）とTailwind CSS

一般的にGatsbyでコンポーネントごとにスタイルシートを分ける場合、以下のような構成になるかと思いますが、Tailwind CSSを用いることでstylesディレクトリが不要になります。 保守性も高まるのでGatsbyとTailwind CSSとの相性は良さそうです。

src
 ├──　component
 │     ├──　header.js
 │     ├──　main.js
 │     └── footer.js
 │
 └──　styles
       ├──　header.css
       ├──　main.css
       └──　footer.css

GatsbyにTailwind CSSを導入

公式ドキュメントに沿って設定を行なっていきます。

1. Tailwind CSSのインストール

$ npm install -D tailwindcss postcss autoprefixer gatsby-plugin-postcss
$ npx tailwindcss init -p

initコマンドを実行することでtailwind.config.jsとpostcss.config.jsファイルが生成されます。

2. Gatsby PostCSSプラグインを有効化する

// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-postcss',
    // ...
  ],
}

3. テンプレートパスの設定

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. CSSにTailwindディレクティブを追加

/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

5. CSSファイルの読み込み

gatsby-browser.jsを作成する

import './src/styles/global.css'

で完了です🎉