Zenn
📖

GatsbyにTailwind CSSを導入する

2022/01/26に公開
Gatsby.js
Tailwind CSS
tech

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

class 説明
bg-blue-500 背景色を青色にする（数値は濃さ）
hover:bg-blue-700 ホバー時に少し濃い青色にする
text-while テキストの色を白にする
font-bold フォントを太文字にする
py-2 垂直方向のパディングを設定
px-4 水平方向のパディングを設定
rounded 角を丸くする

と直接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ファイルが生成されます。

  1. Gatsby PostCSSプラグインを有効化する
gatsby-config.js
// gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-postcss',
    // ...
  ],
}
  1. テンプレートパスの設定
tailwind.config.js
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. CSSにTailwindディレクティブを追加
src/styles/global.css
/* src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. CSSファイルの読み込み
gatsby-browser.js
import './src/styles/global.css'

で完了です🎉

Discussion