tailwindcss ダークモードの実装

Last updated at 2025-10-03Posted at 2025-09-19

この記事の対象者

Tailwind CSSはHTMLに直接スタイルを書き込んで実装ができるCSSフレームワークです。
Tailwind CSSで設定された独自のクラス名を駆使して実装を行うので、最初は学習が必要ですが

などのメリットがあります。
逆に

などのデメリットもあります。

では今回の主題のダークモードの実装についてです。
ダークモードは最近のweb開発ではほとんど必須の要件になっているイメージですが、ダークモードの実装についても手軽にできるようになっています。

ちなみにprefers-color-schemeでOSのダークモードの設定が取得できるので、それを適用する方法もあるのですが、今回は後から手動変更する場合の実装について書きます。

ダークモードの実装については実装方法が大きく分けて2パターンあって、

の順で説明します。

v4からcustom-variantという記法で変数を定義することができるようになっています。
これを利用して"dark"というクラス名についてオーバーライドする方法です。

custom-variantについてはこちら↓

app.css

@import "tailwindcss";
/* この一行を追加 darkについてオーバーライド*/
@custom-variant dark (&:where(.dark, .dark *));

HTML側では"dark:"から始まるクラスを定義しておくことで、ダークモード時の設定を書き込むことができます。

index.html

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

この例だと背景色が白からダークモード時には黒色に変更されるという設定になっています。

こちらでは属性についてdarkを定義して使うようになっています。

app.css

@import "tailwindcss";
/* この一行を追加 darkについてオーバーライド*/
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

この場合、下記のように"data-theme"という属性をhtmlタグに設定して使います。

index.html

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

形式としてはクラスでの設定方法と同じなので簡単ですね。

例えばボタンのコンポーネントだけ分けて実装していたとして、以下のようにしたとします。

<button
    className='bg-blue-700 text-white p-2 rounded-lg active:scale-110 dark:bg-green-500 hover:bg-blue-500'
>

この場合、下の画像のようなボタンが出来上がります。

で、今のコードではhoverにbg-blue-500だけ設定してあるのでダークモード時にカーソルを合わせるとbg-blue-500の色が適用されてしまいます。

解決策として

<button
    className='bg-blue-700 text-white p-2 rounded-lg active:scale-110 dark:bg-green-500 hover:bg-blue-500 dark:hover:bg-green-300'
>

dark:hoverという要素を追加してそこに設定を加えればダークモード時の個別設定ができます。

tailwindcssでのダークモードの実装について書きました。
使い分けとしては単純にライト/ダークモードで簡単に分けるだけならclassで定義したほうが管理が簡単かと思います。
逆にdata-themeのような属性で管理するのは

などに有用かと思います。

追記. 10/3 hoverに関する記述を追加