Gatsby.js で TailwindCSS を使いたくなりました。当ブログでも導入済みです。早速設定方法を記載していきます。
公式サイトにも導入方法が載っているのですが、 順番にやっただけでは postcss のバージョンが原因でうまくいかなかったので少しバージョンをいじっています。
導入手順
まずは、tailwindcss をインストールします。
npm install tailwindcss --save次に、postcss をインストールします。この時に、gatsby-plugin-postcss は最新を入れず、v3.0.0 を入れました。
npm install postcss gatsby-plugin-postcss@3.0.0gatsby-config.jsにプラグインを追加します。
// gatsby-config.js
plugins: [
{
`gatsby-plugin-postcss`, //追加
}
],postcss.config.js をプロジェクトルート直下(gatsby-config.js と同じところ)に新規作成し、以下をコピペします。
// postcss.config.js
module.exports = () => ({
plugins: [require('tailwindcss')],
})/src/components配下にある、ベースとしている CSS の一番上に以下をコピペします。自分の環境では base.css に追加しました。
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';これで完成です。
後は layout.js の中で base.css が読み込まれているか確認します。
// layout.js
import './base.css'ポイントは postcss のバージョン
現時点(2020/10/14)での gatsby-plugin-postcss 最新版は v3.0.2 なのですが、これをインストールしてしまうと、postcss のコンフィグがうまく読み込まれず、エラーになりました。依存関係か何かに課題がありそうです。
なのでバージョンを少し下げてインストールしました。
完成！
あとは、自分の好きなところで tailwind のクラスを使ってもらったら普通に使えるようになっていると思います。
以上です。
