はじめに

今回はReactとtailwindの組み合わせでのダークモードの実装を紹介したいと思います。
対象者としては、Reactとtailwindの組み合わせで何かを実装した経験がある方をメインにしています。
ですのでReactでの開発の始め方やtailwindの導入方法などは記述しませんのでご了承ください🙇
開発環境としては下記になります。

node v16.15.0
taiwind v3.3.2

実装方法

早速実装方法について書きます！
まず下記コード部分を追記してください！

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: "class", //←ここを追加する！
  theme: {
    extend: {},
  },
  plugins: [],
};

以上です、、、、、！！！！！
すごく簡単ですよね。私も難しいのかと思って調べていましたが簡単にできびっくりしました。
tailwindのバージョンによってはこのダークモードの実装方法ではできませんのでご自身のバージョンご確認ください。
上記記述した上で下記の記述のようにdarkクラスを付与するという記述をします。

document.documentElement.classList.add("dark");

この記述をuseEffectなどの中に入れ込み下記のようにします。

DarkMode.jsx

  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }, [isDarkMode]);

  return { isDarkMode, toggle };
};

今回私はisDarkModeをstateで管理するようにして関数作成しました。
そして下記のtoggleボタンにonClick属性を付与してそれをフックに関数呼び出すようにしています。

ToggleButton.jsx

    <div className="flex items-center">
      <span className="mr-3 text-sm font-medium text-yellow-300 dark:text-white">
        <MdLightMode />
      </span>
      <label className="relative inline-flex items-center cursor-pointer">
        <input
          type="checkbox"
          className="sr-only peer"
          onClick={() => toggle()}
        />
        <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-sky-300 dark:peer-focus:ring-sky-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-sky-600"></div>
        <span className="ml-3 text-sm font-medium text-gray-900 dark:text-yellow-300">
          <MdDarkMode />
        </span>
      </label>
    </div>

一部抜粋になりますが、上記toggleボタンの記述です。
下記のデザイン使用させてもらい作成しています。MdLightModeなどのコンポーネントはreact iconを使用しています。
toggleボタン参考リンク

ここまでできたらあとは、ダークモードの時に色を変化させたい部分のクラスにdark：と記述してからスタイルを当てていくとdarkクラスが付与されている時は指定したデザインにすることができます！

おわりに

急ぎで実装したのであまり深掘りできていないので、後日詳しく調べようかと思います。
最後までみていただきありがとうございました！

【React × tailwind】ダーク（ナイト）モードの実装

はじめに

実装方法

おわりに