React(Next.js)でTailwindが効かないときにみるべきところ

はじめに

自分でも何度も同じところで引っかかっているのでまとめておきます

問題

ReactやNext.jsでTailwindCSSを導入したのですが、なぜかスタイルが効かないということが起きていました。

Viteを使ったReact環境やNext.jsで起きていることが多いです。

解決方法

自分の中では解決方法として2つをやってだいたいスタイルが当たるようになっています。

1. postcssをいれる

以下のコマンドを実行するとうまくスタイルが当たりました

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

postcssがないとスタイルが効かないときがあり、tailwindの公式サイトにはココは乗っていませんでした

2. tailwind.confを見直す

Next.jsのプロジェクトによくありがちなミスです。Tailwindの公式サイトの設定は以下のようになっています。

tailwind.config.js

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

しかし、この設定ではsrc以下に設定が反映されるようになっています。
Next.jsではapp以下に設定する必要があります

tailwind.config.js

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

おわりに

だいたいこの2つが原因になることが多かったので書いてみました
また何か追加があれば更新する予定です。