環境

使用するGatsbyのテンプレートはgatsby-gitbook-starterを使います (https://github.com/hasura/gatsby-gitbook-starter)。

Gatsbyのバージョンはv4.3.0です。

TailwindCSSはv3.0を使います。

注意点

TailwindCSSはv3.x.xからpurgeセクションが消え、contentセクションの追加が必要になりました。

contentセクションではTailwindCSSを適用するファイルを指定します。そのため、contentセクションを書いていないとTailwindCSSが使えません。

導入方法

TailwindCSSのチュートリアルを確認しながら導入します。

必要なパッケージを追加します。

1
$ yarn add -D tailwindcss postcss autoprefixer gatsby-plugin-postcss

TailwindCSSの設定ファイルを作成します。

1
$ npx tailwindcss init -p

postcssのGatsby Pluginを追加したので、gatsby-config.jsにも追記します。

gatsby-config.js
1
module.exports = {
2
  plugins: [
3
    // ...
4
    'gatsby-plugin-postcss',
5
    // ...
6
  ],
7
}

TailwindCSSの設定ファイルを修正し、TailwindCSSを適用させたいファイルをしていします。

tailwind.config.js
1
module.exports = {
2
  content: [
3
    "./src/**/*.{js,jsx,ts,tsx}",
4
  ],
5
  theme: {
6
    extend: {},
7
  },
8
  plugins: [],
9
}

src/utils/tailwind.cssを作成し、Tailwindのレイヤーを取り込みます。

src/utils/tailwind.css
1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

gatsby-browser.jsでTailwindCSSを読み込みます。

gatsby-browser.js
1
import './src/utils/tailwind.css'

あとは、TailwindCSSの適当なクラスを当ててみて反映されるかどうかを確認できたら、完了です。