Dark Mode in Tailwind CSS

Dark Mode in Tailwind CSS

In this article, you'll learn how to integrate Dark mode in your ReactJS projects using Tailwind CSS.

Set up the project

First, we need to create a ReactJS project, for that, we gonna use the create-react-app package. So, open your terminal and put the following command:

npx create-react-app my-project --template tailwindcss-starter
# or
yarn create react-app my-project --template tailwindcss-starter

As you see, we passed the --template flag to the command, which means that we want to use some template in our project, in this case, I'll use my own template with Tailwind CSS already configured.

Once the command finished the process, enter to the project folder with cd my-project and you will see the file structure like this:

├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── setupTests.js
├── craco.config.js
├── package.json
├── README.md
├── tailwind.config.js
└── yarn.lock

We'll focus only on the tailwind.config.js file and src/App.js component.

Enable Dark mode

In this tutorial, we'll use a little plugin called nightwind that allows us to include Dark mode in Tailwind CSS very easy.

So, for that open the terminal, and make sure that you are in the root folder in the project, then put the following in the terminal:

npm install nightwind
# or
yarn add nightwind

This command will install the plugin, and the only thing that we need to do to use it is includes the plugin in the tailwind.config.js file.

// tailwind.config.js
module.exports = {
  darkMode: "class",
  // ...
  plugins: [require("nightwind")],
}

Once we have this, we can create a Layout container for add the nightwind class, this allows us to have some transition when enable/disable dark mode.:

// containers/Layout.js
import PropTypes from 'prop-types';

const Layout = ({ children }) => {
  return <div className="nightwind">{children}</div>;
};

Layout.propTypes = {
  children: PropTypes.element.isRequired
};

export default Layout;

Usign Dark mode

It's time to use our Dark mode. So, in your component write some code or you can copy the following code:

// App.js

import Layout from './containers/Layout';

function App() {
  return (
    <Layout>
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
        <h1 className="text-gray-900 text-4xl">Hello World!</h1>
      </div>
    </Layout>
  );
}

export default App;

The code above look's like this:

image.png

Here, the background is some white and the text is black. This thanks to the classes bg-gray-100 and text-gray-900.

To enable/disable Dark mode we must have to create a component with some onClick function, so create a component in components/Toggle.js with the following code:

// components/Toggle.js

const Toggle = () => {
  const handleClick = () => {
    // enable/disable dark mode
  };

  return (
    <button
      onClick={handleClick}
      className="mt-4 px-4 py-2 text-gray-100 font-bold bg-gray-900 rounded-lg"
    >
      Enable/Disable
    </button>
  );
};

export default Toggle;

So, we have this Toggle component with some button and a function that for the moment don't do anything. We need to implement a functionality that allows us to enable/disable Dark mode. Well, nightwind has its function for doing this functionality. The only thing we need to do is import nightwind and use the function toggle like this:

// components/Toggle.js
import nightwind from 'nightwind/helper';

const Toggle = () => {
  const handleClick = () => {
    nightwind.toggle(); // enable/disable dark mode
  };

  // ...
};

In Action

Here is when the magic occurs, so, we only need to click our button and see what's happening.

nightwind-article.gif

But, how it works?

Here is the thing, nightwind converts our colors classes, for example:

In the background, we have bg-gray-100, nightwind do the following 100 - 900, and that returns -800 so the expected Dark color will be bg-gray-800. You can read more in the documentation.

Well, maybe we need a custom color, for example, we have the following code:

<h1 className="text-gray-100">Hello World</h1>

The color of the text above will be text-gray-800 in Dark mode, but maybe we want that this text converts to red color, for example, to override this thing you can add the following class dark:text-red-800.

And that's it, I hope you find useful this article. Any advice or suggestion is welcome.

Happy Coding!