📝

Tailwind CSS v4 でダークモードを実装できないとき

に公開
Next.js
React
TypeScript
Tailwind CSS
tech

今までできたこと

今まではtailwind.config.jsファイルでdarkModeを設定できていた。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class", // Enable dark mode using the 'class' strategy
//others...
}

こうすることで、適切にコンポーネントでも作成すれば，tsxファイルなどでclassName="bg-white dark:bg-gray-800"などと指定してダークモードとの切り替えを実現できた。
しかし、Tailwind CSS v4 では、アップデートに伴い，tailwind.config.jsファイルをいじってもダークモードにはできない。

解決策

globals.cssを開き、ファイルの冒頭部分に次の行を追加する。

globals.css
@import "tailwindcss";
+ @custom-variant dark (&:where(.dark, .dark *));

なおtailwind.config.jsファイルからdarkモードに関する記述は削除してかまわない。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
- darkMode: "class", // Enable dark mode using the 'class' strategy
//others...
}

公式ドキュメント

https://tailwindcss.com/docs/dark-mode

Discussion