Dark Mode ทำยังไงใน Tailwind CSS

npm create vite 
o  Project name:
|  Tailwind-Dark-React
|
o  Package name:
|  tailwind-dark-react
|
o  Select a framework:
|  React
|
o  Select a variant:
|  JavaScript
|
o  Scaffolding project in C
|
—  Done. Now run:

  cd Tailwind-Dark-React
  npm install
  npm run dev

npm install tailwindcss @tailwindcss/vite

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// <https://vite.dev/config/>
export default defineConfig({
  plugins: [react(),tailwindcss()],
})

@import "tailwindcss";

{
  font-family: monospace;
}

// tailwind.config.js (ใช้ ES Module)
export default {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
      extend: {},
    },
    plugins: [],
  }

import React from 'react'

const App = () => {
  return (
    <div class="bg-black text-white p-4 justify-center items-center flex h-screen">
      Hello tailwind 
    </div>
  )
}

export default App

import React, { useState } from 'react'

const App = () => {
  const [darkMode, setDarkMode] = useState(false) 
  const turnOnDarkMode = () => {
    setDarkMode(!darkMode)
  }
  return (
    <div className="bg-white text-black p-4 justify-center items-center flex h-screen flex-col ">
      <button onClick={setDarkMode} className=" fixed top-4 right-4 z-50 p-2 rounded-full bg-white text-white shadow hover:scale-105 transition ">{darkMode ? "☀️" : "🌕"}</button>
      <h1 className="text-3xl font-bold mb-4">Hello Tailwind</h1>
      <p className="text-lg text-lowercase">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti impedit accusamus asperiores sequi numquam dignissimos molestiae. Perferendis, sunt placeat? Esse facere error molestias amet quae inventore perspiciatis asperiores recusandae. Aspernatur at deleniti ratione reiciendis quae, accusamus suscipit repudiandae corporis sequi debitis sapiente odit quas? Repudiandae, labore nobis modi odit nemo cumque recusandae saepe omnis reiciendis tempore, illum ipsam tempora corrupti necessitatibus ratione provident hic rem excepturi repellendus! Voluptate quasi dolore doloribus labore incidunt veniam officia magnam quisquam, quod earum beatae consequatur necessitatibus similique exercitationem error iure rem dolor ullam nisi et! Neque, suscipit! Unde odit quae dolore optio excepturi nobis reiciendis repellat neque necessitatibus consequatur fugit laudantium vero, quidem non!</p>
    </div>
  )
}

export default App

// tailwind.config.js (ใช้ ES Module)
export default {
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
      extend: {
      },
    },
    plugins: [],
    darkMode: 'class'
  }

import React, { useState } from 'react'

const App = () => {
  const [darkMode, setDarkMode] = useState(false)

  const turnOnDarkMode = () => {
    setDarkMode(!darkMode)
  }

  return (
    <div className={`${darkMode ? 'bg-black text-white' : 'bg-white text-black'}`}>
      <div className={`p-4 justify-center items-center flex h-screen flex-col transition-colors duration-300 ${
        darkMode ? 'bg-black text-white' : 'bg-white text-black'
      }`}>
        <button
          onClick={turnOnDarkMode}
          className={`fixed top-4 right-4 z-50 p-2 rounded-full shadow hover:scale-105 transition ${
            darkMode ? 'bg-white text-black' : 'bg-black text-white'
          }`}
        >
          {darkMode ? '☀️' : '🌕'}
        </button>

        <h1 className="text-3xl font-bold mb-4">Hello Tailwind</h1>
        <p className="text-lg lowercase">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. ...
        </p>
      </div>
    </div>
  )
}

export default App

@import "tailwindcss";

* {
  font-family: monospace;
  @apply transition-colors duration-300;
}