nextjsでtailwindcssが効かないときの対処法
投稿日:2023/10/26
環境
- nextjs:13.5(app router)
- tailwindcss:3.3
あとからtailwindcssを導入しようとして適当にインストールして、他のプロジェクトからのglobals.css,tailwind.config.jsをコピペしてきた。
対処方法
公式ドキュメントに従って、順に対処していく。
1.まずは必要なライブラリ類のインストール
1npm i -D tailwindcss postcss autoprefixer
2# or
3yarn i -D tailwindcss postcss autoprefixer
4#or
5pnpm i -D tailwindcss postcss autoprefixer途中から入れるとなるとpostcssやautoprefixerの入れ忘れのことも多いので全て入れましょう。
2. globals.css,tailwind.config.jsをリセットする
上記でも直らないのであれば一度リセットします。
tailwind.config.js
1/** @type {import('tailwindcss').Config} */
2module.exports = {
3 content: [
4 "./app/**/*.{js,ts,jsx,tsx,mdx}",
5 "./pages/**/*.{js,ts,jsx,tsx,mdx}",
6 "./components/**/*.{js,ts,jsx,tsx,mdx}",
7
8 // Or if using `src` directory:
9 "./src/**/*.{js,ts,jsx,tsx,mdx}",
10 ],
11 theme: {
12 extend: {},
13 },
14 plugins: [],
15}globals.css
1@tailwind base;
2@tailwind components;
3@tailwind utilities;最後に
nextjsのプロジェクトに後からtailwindcssを入れようとして何度も同じ目にあっているのでまとめてみました。tailwindcssを入れるなら最初のcreate-next-appする段階で入れましょう。