حالت تاریک را در Tailwind v4.0 + React اجرا کنید

با استفاده از Tailwind v4.0 از بین بردن tailwind.config.js ، رویکرد حالت تاریک نیز تغییر کرده است! هیچ نگرانی وجود ندارد ، اما در اینجا چگونه می توانید آن را در برنامه React خود تنظیم کنید.
من ساده ترین راه برای اجرای حالت تاریک با React و Tailwind v4.0 را به شما نشان خواهم داد

▶ ️ CSS Tailwind را نصب کنید

برای نصب Tailwind در پروژه React خود ، اسناد رسمی Tailwind را دنبال کنید.

▶ ️ CSS جهانی را پیکربندی کنید

از آنجا که tailwind.config.js دیگر در دسترس نیست ، موارد زیر را به index.css خود اضافه کنید:

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

▶ ️ یک مؤلفه ضامن حالت تاریک ایجاد کنید

import React from 'react'
import { useEffect } from 'react';
import { useState } from 'react'

function ToggleTheme() {
    const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');

    useEffect(()=>{
        localStorage.setItem('theme',theme);
        document.documentElement.classList.toggle('dark', theme === 'dark');
    },[theme])

    const toggleTheme = ()=>{
        setTheme(theme === 'light' ? 'dark':'light');
    }
  return (
     {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
  )
}

export default ToggleTheme;

فقط این مؤلفه toggletheme را در هر نقطه از پروژه خود وارد کنید ، و خوب است که بروید! برنامه React شما اکنون یک سوئیچ حالت تاریک عملکردی خواهد داشت.

اگر این کمک کرد و به اشتراک بگذارید!