GatsbyJS に TailwindCSS を導入する。

2020-08-13

こんにちは、0371です。

GatsbyJS に TailwindCSS を導入しています。忘れっぽいので、今のうちに導入方法を備忘録として残しておきます。
ついでにPurgeCSSを使って、CSSのサイズを削減するのも行います。

必要なもの

GatsbyJSを使用したサイト
TailwindCSSを理解しようとする気持ち
やる気、元気、心の余裕

設定方法

まずは必要なプラグインをインストールします。 PostCSSは、tailwindCSSの元になっているフレームワークです。

yarn add gatsby-plugin-postcss tailwindcss gatsby-plugin-purgecss

そして、gatsby-config.jsにプラグインを書き込んでいきます。
gatsby-plugin-postcssとgatsby-plugin-purgecssを追加しましょう。

gatsby-plugin-purgecssは、必ずCSS系のプラグインの後に記述してください。

module.exports = {
/* Your site config here */
  plugins: [
    `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-plugin-purgecss`,
      options: {
        rejected:true,        // 削除されたCSSの容量を表示 
        printRejected: false,  // 削除したCSSを最大100個まで一覧表示
        printAll: false       // 削除したCSSを全て一覧表示 
        develop: false,        // 開発環境でbuildした時もCSSを削除
        tailwind: true,       // TailwindCSS使用時はTrue default: false
        whitelist: ['selector'], // 削除しないCSSを指定 default: []
        ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // 削除しないファイルを指定 default: []
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // 指定したファイルのCSSのみを削除 default: []
      }
    },
  ],
}

使わないoptionは削除してください。
最低限、tailwind: trueだけは設定しましょう。

gatsby-plugin-purgecss のoptionは他にもあります。
気になる方は、公式ドキュメントのリンクから確認してみてください。

※PurgeCSSにより、意図しないCSSの削除が発生する可能性があります。
レイアウトが崩れたら、whitelistかignore オプションで対応しましょう。

次に、tailwind.config.jsを作成するためにコマンドを入力します。

npx tailwindcss init

プロジェクトのrootディレクトリにあるので、中身を確認して、purge: falseを記述してください。
tailwindCSSにデフォルトでついてる削除機能をオフにします。

module.exports = {
  purge: false, // ここ
  theme: {
    extend: {},
  },
  variants: {},
  plugins: []
}

その後、プロジェクトのrootディレクトリに、postcss.config.js を作成します。

const tailwind = require('tailwindcss')

module.exports = () => ({
  plugins: [tailwind('./tailwind.config.js')],
})

これで、postcss.config.js が tailwind.config.js を認識するようになりました。

次に、Tailwindcss を使用するための CSS ファイルを作成します。
./src/utils/tailwind.css などとします。

@tailwind base;

@tailwind components;

@tailwind utilities;

うまく導入できたかどうかをテストしてみます。

./src/pages/test.js を作って、以下のコードを貼り付けてください。

import React from "react"
import '../utils/tailwind.css'

const Test = () => {
  return (
    <div>
      <h1 className="h-screen flex items-center justify-center text-4xl transform hover:scale-150 hover:rotate-45 hover:skew-y-12 hover:-skew-y-12 transition duration-300 ease-in-out">
        Hello tailwindCSS
      </h1>
    </div>
  )
}
export default Test

gatsby developでhttp://localhost:8000/testにアクセスしてください。

画面内にカーソルを置いたときに、文字のアニメーションが動作したら成功です。
画面外で元に戻ります。

最後に、tailwind.css を layout.js 等にインポートしましょう。

import '../utils/tailwind.css'

これで、プロジェクトの中で、TailwindCSSを使用できるようになりました。
test.jsは不要であれば削除してください。

参考

Tailwind CSS
"https://tailwindcss.com/"

Gatsby Plugin Purgecss
"https://www.gatsbyjs.com/plugins/gatsby-plugin-purgecss/"

Tailwind CSS Cheat Sheet
"https://nerdcave.com/tailwind-cheat-sheet"

感想

TailwindCSSは神。