「ダークモードに対応してほしい」と言われて、身構えた経験はありませんか？ 全部のスタイルを2つ用意するのは大変そう……と思いきや、Tailwind CSSなら dark: という接頭辞を付けるだけで、驚くほど簡単に対応できます。
この記事では、dark: の基本から、Tailwind v4での有効化方法（v3から変わっています）、そして「OSの設定に自動で追従する」パターンと「ボタンで切り替える」パターンの両方を解説します。レスポンシブの md: を知っている方なら、考え方はまったく同じなのですぐ馴染めます。md: など接頭辞の基本は Tailwind CSSの使い方【初心者向け】 にまとめています。
目次
まず結論：dark: を付けるだけ
ダークモードのスタイルは、通常のクラスに dark: を付けたものを足すだけです。下の例なら、普段は白背景＋濃い文字、ダークモードのときだけ濃い背景＋明るい文字になります。
<div class="bg-white text-slate-800
dark:bg-slate-800 dark:text-slate-100">
ダークモードでも読みやすいカード
</div>同じカードが、ライト／ダークでこう切り替わります。
ポイントは「ベースはライトモードで書き、暗いときに上書きしたい部分だけ dark: で足す」という発想です。これは md: で「画面が広いときだけ上書きする」のとまったく同じ考え方。だから md: を使えるなら、dark: もすぐ使えます。
Tailwind v4でのダークモードの有効化
ここが v3から変わったところなので注意してください。v4はCSSファースト設計になり、tailwind.config.js の darkMode 設定は廃止されました。代わりに、どう切り替えるかをCSS側で決めます。
パターン①：OSの設定に自動で追従する（デフォルト）
実はいちばん簡単なのは「何もしない」ことです。追加設定なしのデフォルトでは、dark: はOS（ブラウザ）のダークモード設定に自動で追従します。内部的には @media (prefers-color-scheme: dark) が使われます。
/* app.css — これだけでOSの設定に追従する */
@import "tailwindcss";「ユーザーのOSがダークモードなら、サイトもダークで表示したい」だけなら、これで完了です。
パターン②：ボタンで切り替えたい（クラス／セレクタ戦略）
「サイト内のトグルボタンで明暗を切り替えたい」場合は、.dark クラスが付いているかどうかで切り替わるように、@custom-variant でカスタム定義します。
/* app.css */
@import "tailwindcss";
/* <html class="dark"> が付いているときだけ dark: を効かせる */
@custom-variant dark (&:where(.dark, .dark *));あとは、<html>（や任意の親要素）に dark クラスを付け外しすれば、配下の dark: が一斉に切り替わります。付け外しはJavaScriptで行います。
<button onclick="document.documentElement.classList.toggle('dark')">
テーマ切り替え
</button>実際のサイトでは、選んだテーマを localStorage に保存しておき、次回アクセス時に復元するのが定番です（ここはJavaScript側の実装になります）。data-theme 属性で管理したい場合は、@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)) のように属性セレクタに変えてもOKです。
配色のコツ：slateスケールで濃淡をそろえる
ダークモードは「ただ背景を黒くする」だけだと、かえって見づらくなります。きれいに見せるコツは、真っ黒・真っ白を避け、グレースケール（slate など）で濃淡をそろえることです。
| 役割 | ライト | ダーク |
|---|---|---|
| 背景 | bg-white | dark:bg-slate-900 |
| カード | bg-white | dark:bg-slate-800 |
| 枠線 | border-slate-200 | dark:border-slate-700 |
| 本文 | text-slate-700 | dark:text-slate-200 |
| 補足テキスト | text-slate-500 | dark:text-slate-400 |
背景は slate-900、カードはそれより一段明るい slate-800、というように「暗い側にも階層をつける」と、のっぺりせず立体感が出ます。文字も純白（white）ではなく slate-100〜slate-200 にすると、コントラストが強すぎず目に優しくなります。
まとめ
Tailwindのダークモード対応を振り返ります。
- 暗いときに上書きしたい部分にだけ
dark:を足す（md:と同じ発想） - v4では
darkMode設定は廃止。デフォルトはOS設定に自動追従 - ボタンで切り替えるなら
@custom-variant dark (&:where(.dark, .dark *))＋darkクラスの付け外し - 配色は真っ黒・真っ白を避け、
slateスケールで濃淡に階層をつける
まずは手元のカードに dark:bg-slate-800 dark:text-slate-100 を足して、OSをダークモードにして眺めてみてください。それだけで「お、対応できてる」と実感できるはずです。関連して、peerでフォームの状態スタイルを切り替える方法 や、レイアウトの基礎は Tailwind CSSの使い方【初心者向け】 もどうぞ。
スポンサーリンク
