Setup Dark mode with Tailwind CSS.

• npx create-react-app my-project

Install Tailwind via npm

* npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9


* npm install @craco/craco

Once it’s installed, update your scripts in your package.json file to use craco instead of react-scripts for all scripts except eject:

  {
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
        "eject": "react-scripts eject"
    },
  }

Next, create a craco.config.js at the root of our project and add the tailwindcss and autoprefixer as PostCSS plugins:

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Next, generate your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Configure Tailwind to remove unused styles in production

// tailwind.config.js
  module.exports = {
   purge: [],
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Include Tailwind in your CSS

• Open the ./src/index.css file that Create React App generates for you by default and use the @tailwind directive to include Tailwind’s base, components, and utilities styles, replacing the original file contents:

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

• Finally, ensure your CSS file is being imported in your ./src/index.js file:

  // src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
 import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';

  ReactDOM.render(
    
      
    ,
    document.getElementById('root')
  );

  // ...

You’re finished! Now when you run npm run start, Tailwind CSS will be ready to use in your Create React App project.

Dark Mode Setup :

Add class in tailwind.config.js.

module.exports = {
  purge: [],
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Now Darkmode enable in App.js

Result:

White Mode:

Dark Mode: