【Step by Step】How to implement Dark Mode with Tailwind CSS on React

Create your React app with CRA CLI

$ npx create-react-app dark
$ cd dark
$ npm run start
import React from 'react';

function App() {
return (
<div className="App">
<header className="App-header">
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;
Just texts with white background-color

Add Tailwind CSS

Let’s add packages for Tailwind CSS

$ npm i tailwindcss autoprefixer postcss-cli --save-dev

Generate a config file of Tailwind CSS.

$ npx tailwindcss init

Add postcss.config.js

module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};

Make a Stylesheet file.

@tailwind base;@tailwind components;@tailwind utilities;

Add a script to generate a CSS file

"scripts": {
+ "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css",
"start": "react-scripts start",
"build": "react-scripts build",
.
.
.
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "tailwind:css": "tailwind build src/tailwind.src.css -c tailwind.config.js -o src/tailwind.css",
+ "start": "npm run tailwind:css && react-scripts start",
+ "build": "npm run tailwind:css && react-scripts build",

Let’s import tailwind.css in App.js

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

function App() {
return (

Use Tailwind CSS to align your text

import React from 'react';
import './tailwind.css';
function App() {
return (
<div className="App">
<header className="App-header text-center">
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
text centered

Customize Tailwind CSS for Dark mode

<div className="dark:bg-black">

Customize screens property

module.exports = {
future: {
// removeDeprecatedGapUtilities: true,
// purgeLayersByDefault: true,
},
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: ['./src/App.js'],
theme: {
extend: {
screens: {
dark: { raw: '(prefers-color-scheme: dark)' },
},
},
},
variants: {},
plugins: [],
}
@media (prefers-color-scheme: dark) {
.dark\:container {
width: 100%;
}

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

Dark Mode

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

function App() {
return (
<div className="App dark:bg-black dark:text-white">
<header className="App-header text-center">
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store