How can I make the tailwind dark mode enabled by default in react?-CodePudding

For example, if a new user visits the site for the first time, dark mode should be enabled by default using the darkMode: 'class' option.

CodePudding user response：

You're on the right track. Once you set darkMode: 'class', you need to apply the to the element that you want the dark mode applied to.

https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

CodePudding user response：

Complete Solution on this link: https://en.taishikato.com/posts/how-to-implement-dark-mode-with-tailwind-css

@media (prefers-color-scheme: dark) {
  .dark\:container {
    width: 100%;
  }

  @media (min-width: 640px) {
    .dark\:container {
      max-width: 640px;
    }
  }
  .
  .

import React from 'react';
import './tailwind.css';

function App() {
  return (
    <div className="App dark:bg-black dark:text-white">