【Step by Step】How to implement Dark Mode with Tailwind CSS on React
Tags: webdev, css, darkmode, tailwindcss
Published: 2020-09-28 00:00:18

> This article is also on [Medium](https://medium.com/@TaishiKato/step-by-step-how-to-implement-dark-mode-with-tailwind-css-on-react-8d7e1667b3db) and [en.taishikato.com](https://en.taishikato.com/posts/how-to-implement-dark-mode-with-tailwind-css)

[Taishi](https://twitter.com/ProductHance) here👋

Today I am going to write about how to implement Dark Mode with Tailwind CSS.
Dark Mode is now one of the important features for usability and you should implement this on your website if you have not done yet.

Don't worry. It's quite easy!

BTW, the complete example on GitHub is here ✌️
{% github taishikato/Dark-Mode-with-Tailwind-CSS no-readme %}

## Create your React app with CRA CLI

```shell
$ npx create-react-app dark
```

Let's host it on http://local:3000

```shell
$ cd dark
$ npm run start
```

Now I believe you see this page on your `http://localhost:3000` 🎉 

![React default page](https://dev-to-uploads.s3.amazonaws.com/i/zc3kjkznthqn5s2yua5d.png)

This time we don't need `./src/App.css`, so delete the file and make `./src/App.js` simpler like below😸

```jsx
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;
```

Now the website looks much simpler.

![simple react page](https://dev-to-uploads.s3.amazonaws.com/i/gykc4k24jgjmt98ihhp6.png)

## Add Tailwind CSS

### Let's add packages for Tailwind CSS

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

### Generate a config file of Tailwind CSS.

The command below creates `./tailwind.config.js`.

```shell
$ npx tailwindcss init
```

### Add `postcss.config.js`

The content looks like this.

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

### Make a Stylesheet file.

Let's add a `./src/tailwind.src.css` like below.

```css
@tailwind base;

@tailwind components;

@tailwind utilities;
```

### Add a script to generate a CSS file

`tailwind:css` on `package.json` builds a CSS file as `./src/tailwind.css` you actually use in your React app.

```json
"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",
     .
     .
     .
```

Let `start` and `build` use `tailwind:css`.

```json
"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",
```

Every time you use the start or build script, it generates a CSS file for you👍

### Let's import `tailwind.css` in `App.js`

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

 function App() {
   return (
```

All set! Now your app uses Tailwind CSS 🌬️

### Use Tailwind CSS to align your text

Just try to use a class `text-center` from Tailwind CSS. Now our App.js looks like below.

```jsx
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;
```

Your web page looks like below.

![text center](https://dev-to-uploads.s3.amazonaws.com/i/bvbxflo5ro1hc1h6q0zr.png)

## Customize Tailwind CSS for Dark mode

We want to use `dark:` like this. In this example, when the value of [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is `dark`, `bg-black` becomes valid.

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

First, we need to customize `tailwind.config.js` to make it happen😎

### Customize the `screens` property

Your current `tailwind.config.js` should look like this.

```javascript
module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

Add `screens` property under `extend`.

```javascript
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: ['./src/App.js'],
  theme: {
    extend: {
      screens: {
        dark: { raw: '(prefers-color-scheme: dark)' },
      },
    },
  },
  variants: {},
  plugins: [],
}
```

**What's gonna happen!?**

According to the Tailwind CSS document -  [Custom media queries](https://tailwindcss.com/docs/breakpoints#custom-media-queries), we can make our own screen, which means `tailwindcss` command generates CSS like this:

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

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

Let's execute `npm run start` again to generate a new `tailwind.css` and check the file 👀

![dark tailwind code](https://dev-to-uploads.s3.amazonaws.com/i/m5060whknep7exgcq1ln.png)

It's working!

## Dark Mode

Let's make your app dark mode available 😈 

Just add `dark:bg-black dark:text-white` on `App.js`.

```javascript
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;
```

Now it has Dark Mode 👽

![dark mode is working](https://dev-to-uploads.s3.amazonaws.com/i/lfyqltbq8yg9n9fuy82f.gif)


Thank you for reading.