Implement Dark Mode in Tailwind v4.0 + React

With Tailwind v4.0 removing tailwind.config.js, the approach to dark mode has also changed! No worries, though—here’s how you can set it up in your React app. I will show you the easiest way to implement dark mode with React and tailwind v4.0 ▶️ Install Tailwind CSS Follow the official Tailwind Docs to install Tailwind in your React project. ▶️ Configure Global CSS Since tailwind.config.js is no longer available, add the following to your index.css: @import "tailwindcss"; @custom-variant dark (&:is(.dark *)); ▶️ Create a Dark Mode Toggle Component 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; Just import this ToggleTheme component anywhere in your project, and you're good to go! Your React app will now have a functional dark mode switch. Like & share if this helped!

Feb 16, 2025 - 08:49

Implement Dark Mode in Tailwind v4.0 + React

With Tailwind v4.0 removing tailwind.config.js, the approach to dark mode has also changed! No worries, though—here’s how you can set it up in your React app.
I will show you the easiest way to implement dark mode with React and tailwind v4.0

▶️ Install Tailwind CSS

Follow the official Tailwind Docs to install Tailwind in your React project.

▶️ Configure Global CSS

Since tailwind.config.js is no longer available, add the following to your index.css:

@import "tailwindcss";

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

▶️ Create a Dark Mode Toggle Component

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 (
    
  )
}

export default ToggleTheme;

Just import this ToggleTheme component anywhere in your project, and you're good to go! Your React app will now have a functional dark mode switch.

Like & share if this helped!