ダークモード対応 — dark:修飾子の使い方 - Tailwind CSS実践ガイド

Tailwindは dark: プレフィックスでダークモードのスタイルを指定できます。状態修飾子（hover: など）と同じプレフィックス方式なので、考え方はそのまま応用できます。

学習者

ダークモードって、全部のページに自分でCSSを書き足すのかと思ってた…。Tailwindだと簡単にできるの？

先生

ライト用クラスの隣に dark: 付きを足すだけ。bg-white dark:bg-gray-900 のようにね。OS設定との連動も標準でできるよ。

基本の使い方

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <p>テキスト</p>
  <button class="bg-blue-600 dark:bg-blue-500 text-white">
    ボタン
  </button>
</div>

OSの設定に連動（デフォルト）

デフォルトでは prefers-color-scheme: dark メディアクエリに連動します。ユーザーのOS設定が「ダーク」のときに dark: クラスが有効になります。

<!-- OS設定がダークのとき自動でダークモード -->
<body class="bg-white dark:bg-gray-950">
  ...
</body>

手動切り替え（クラスベース）

ボタンでテーマを切り替えたい場合は、html 要素に dark クラスを付け外しします。

v4 の設定：

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

v3 の設定：

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

React でのトグル実装：

function ThemeToggle() {
  const toggleDark = () => {
    document.documentElement.classList.toggle('dark')
  }
  return <button onClick={toggleDark}>テーマ切り替え</button>
}

実践：ダークモード対応カード

<div class="
  bg-white dark:bg-gray-800
  border border-gray-200 dark:border-gray-700
  rounded-xl p-6
  shadow-sm dark:shadow-none
">
  <h2 class="text-gray-900 dark:text-gray-100 font-semibold text-lg">
    カードタイトル
  </h2>
  <p class="text-gray-500 dark:text-gray-400 mt-2">
    説明テキスト
  </p>
</div>

ちゃんと使うためのポイント

dark: クラスはライト用クラスと並べて書く（bg-white dark:bg-gray-900）
OS連動で十分な場合はデフォルト設定のまま使う
ボタンで切り替えるなら darkMode: 'class'（v3）または @variant dark（v4）を設定
色の選択はライト・ダーク両方で確認する

次の章では、コンポーネントのパターンを効率よく組み立てる方法を学びます。