この記事では、Tailwind CSS で ダーク モードを実装する方法を検討します。ダーク モードは、暗い環境でも優れたユーザー エクスペリエンスを提供し、目の疲れを軽減するため、人気のデザイン トレンドになっています。 Tailwind では、組み込みユーティリティを使用してダーク モードを簡単にサポートできます。

1. Tailwind でのダークモードの仕組み

Tailwind は、ダーク バリアントを通じてダーク モードを実装するためのシンプルなアプローチを提供します。デフォルトでは、ユーザーのシステム設定のダーク モードをチェックし、対応するスタイルを適用します。

Tailwind でダーク モードを設定する:

tailwind.config.js ファイルで、メディア (システム環境設定) またはクラス (手動切り替え) に設定してダーク モードを有効にします:

module.exports = {
  darkMode: 'media', // or 'class'
}

• メディア: ユーザーの OS 設定に基づいてダーク モードを有効にします。
• class: ダーク クラスを追加することで、ダーク モードを手動で切り替えることができます。

2.ダークモードのスタイリング

ダーク モードを有効にすると、ダーク バリアントを使用してダーク モード専用のスタイルを適用できます。

例：

    This is a dark mode toggle example

• bg-white と text-black はライト モードに適用されます。
• dark:bg-gray-800 および dark:text-white は、ダーク モードがアクティブな場合に適用されます。

この柔軟性により、ダーク モードとライト モードでコンポーネントのスタイルを変えることができます。

3.テイルウィンドのクラス戦略によるダークモード

ユーザーがライト モードとダーク モードを手動で切り替えられるようにしたい場合は、クラス戦略を使用します。これにより、 要素または

JavaScript を使用した例:

  
    

      Toggle dark mode manually
    
    
      Toggle Dark Mode
    
  

この設定では、ボタンをクリックするとダーク クラスが切り替わり、ライト モードとダーク モードが切り替わります。

4.特定の要素にダーク モードを使用する

Web ページの特定のセクションだけをダーク モードに切り替え、他の部分は変更しないでおきたい場合があります。特定のコンテナ内でダーク モード クラスをラップすることで、要素ごとにダーク モード スタイルを適用できます。

例：

    

        This section is in dark mode, while the outer section remains light.
    

この方法を使用すると、デザインのどの部分がダーク モードの影響を受けるかをより詳細に制御できます。

5.ダークモードカラーの調整

カラー パレットを拡張することで、tailwind.config.js ファイルのダーク モード カラーをカスタマイズすることもできます。

例：

module.exports = {
  theme: {
    extend: {
      colors: {
        darkBackground: '#1a202c',
        darkText: '#f7fafc',
      },
    },
  },
}

これで、次のようにカスタム ダーク モード カラーを使用できるようになります:

    Custom Dark Mode Colors

結論

Tailwind CSS を使用すると、システム設定または手動切り替えを通じてダーク モードを簡単に実装できます。ダーク バリアントを使用すると、さまざまなユーザーの好みにシームレスに調整できる、視覚的に魅力的なデザインを作成できます。

LinkedIn でフォローしてください - リドイ ハサン
私のウェブサイトにアクセス - ridoyweb.com
次に読む-
CSS を記述するためのベスト プラクティス