Next.jsにtailwindcssを導入できなかった

## やったこと

ネットで「tailwindcss」と検索して一番上に出てくる公式サイトのドキュメント。

https://tailwindcss.com/docs/installation

こちらのInstallationの手順に従ってtailwindcssのセットアップを進めても、Next.jsで作成したプロジェクトにスタイルが適用されなかった。

## バージョン

Next.js: 13.1.5
tailwindcss: 3.2.4

## 原因

Next.jsに導入する場合は以下の手順に従う。

https://tailwindcss.com/docs/guides/nextjs


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2907902/f4fed130-b355-d003-c567-e6e4876668f7.png" width="500" />

この検索窓に「nextjs」と入れると出てくる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2907902/078ff121-740a-7e1a-a653-47f32bb60f05.png" width="500" />

Next.jsの公式ドキュメントによると、

> Next.js では、PostCSS を使って組み込み用のCSSをコンパイルしています。

とのことで、追加でpostcssとautoprefixerが必要らしい。

https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/customizing-postcss-config

これらを追加した後に`npx tailwindcss init -p`コマンドを叩くと、postcss.config.jsが作成される。
これが必要。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2907902/53d3d316-cd46-6dde-c1c3-541ae7cef67f.png" width="200" />

中身はこんな感じ。
ここで設定をしているらしい。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2907902/91de991e-cbf8-9fbd-8e8f-6f1bc379ee69.png" width="200" />

なお、`npx tailwindcss init`を実行すると、`tailwind.config.js`のみ作成されて、-pオプションつきの`npx tailwindcss init -p`を実行すると、`tailwind.config.js`と`postcss.config.js`の2つが生成される。そのため、`npx tailwindcss init -p`を実行する必要がある。

https://tailwindcss.com/docs/configuration

## 変更が反映されていない場合

一番最初にあげた公式の手順に従って各種設定を実行し、`npm run dev`してビルドした場合、後から`npx tailwindcss init -p`を行って`postcss.config.js`を作成して`npm run dev`して新しくビルドしてもtailwindcssの設定が反映されていない。

その場合、一番上の.nextフォルダを削除した後に再度`npm run dev`して.nextフォルダを生成すると変更が反映されている。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2907902/db29cfd2-600b-7f1f-9b8d-2244dfe7f8a5.png" width="200" />

この.nextフォルダは`npm run dev`でビルドした時にできるアプリ本体でキャッシュの役割を果たしている。そのため、pageやcomponent等の変更は即座に反映される（ホットリロード）ものの、設定ファイルの変更は反映されない。

https://stackoverflow.com/questions/71688086/why-i-cant-delete-next-folder-in-nextjs-project

## 補足

`postcss.config.js`を作成しても変更が反映されていない場合、ビルド時にコンソールにこんなメッセージが表示されていると思う。

```
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
```

:::note note
Fast Refreshというのはコードを変更しても直前のstateの状態が保持されたままの機能のことである。

テキスト(stateで管理している)を入力した状態で First nameをLast nameに変更する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2907902/3408c1a2-9ff9-b619-acee-f02d52992b03.png" width="200" />

直前のテキストが保持されている。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2907902/66ce8150-ef9f-dc6b-59bc-9d22e028317d.png" width="200" />
:::

これは下記で起票されていたが、バグではないとのことであった。

> 1- This is not a bug, it's just a unhandled behavior while you have the project open from previous running instance.
これはバグではありません。前に起動していた状態のインスタンスからプロジェクトを開いた際の予期せぬ挙動です。
2- does it cause critical error? No.
深刻なエラーを引き起こしますか？　いいえ。
3- Is there a fix? Yes, I found a simple solution and I'll try to send the PR for this and have it fix.
修正方法はありますか？　あります。簡単な方法を見つけたので、PRを送って直してもらいます。


https://github.com/vercel/next.js/issues/40184

## 終わりに

いつもこの辺りの設定はおまじない的に深く考えずにやっていたので、結構困った。
コマンド1つとってもその役割を理解することが重要。