Tailwind CSSでClass戦略によるダークモード
class戦略を使用してTailwind CSSのダークモードを設定し、手動トグル制御を実現します。実装パターンとテーマ切り替えコードを含みます。
Colors
詳細な説明
ダークモード：Class戦略
Tailwind CSSは2つのダークモード戦略をサポートしています：media（OS設定に従う）とclass（手動トグル）。class戦略は完全なプログラム制御を提供します。
設定
darkModeを"class"に設定すると、Tailwindは<html>要素にdarkクラスが存在するときにアクティブになるダークバリアントを生成します。
Class vs Media
| 機能 | Class | Media |
|---|---|---|
| ユーザートグル | 可能 | 不可 |
| OS設定 | 手動チェック | 自動 |
| SSRフラッシュ | 可能性あり（修正可） | なし |
| 細かい制御 | 完全 | 限定的 |
class戦略は、ユーザーに選択肢を提供できるため、ほとんどのアプリケーションに推奨されます。
ユースケース
アプリケーションのヘッダーや設定でダーク/ライトテーマのトグルボタンを提供したい場合にclass戦略を使用してください。