【Gatsby】Tailwind CSSを導入する

Install Tailwind CSS with Gatsby – Tailwind CSS

Setting up Tailwind CSS in a Gatsby project.

tailwindcss.com

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

たまに間違えるんだけど、tailwind.config.jsは手動で作らなくていいから(´・ω・｀)

できたらcontentに対してマニュアル通りに入れる。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

まあマニュアル通りにsrcディレクトリ内にstylesを用意し、そこにglobal.cssファイルを作成。中身は以下の通り。

@tailwind base;
@tailwind components;
@tailwind utilities;

プロジェクトファイルのルートディレクトリ(恐らくsrcの上の階層)にgatsby-browser.jsを作成し、global.cssを読み込ませる。誰やindex.tsxに読み込ませに行ったやつ。

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

おっと忘れてたgatsby-config.js。まあマニュアル通り。
pluginsにgatsby-plugin-postcssを追加してやりなさい。

npmで入れてたらnpm run developかと。