Dark: Tailwind CSS(dark mode)

This is a quick tutorial on how to create a dark mode toggle button using Tailwindcss. First of all, I am not a frontend expert, and I am open for corrections for a better approach regarding darkMode configurations.

Disclaimer: This dark mode is a manual toggle and will not rely on the operating system.

Install Tailwind CSS

You can follow the installation steps on tailwind css website.

In your terminal (MAC) / command line (Windows), run the following commands to install tailwind, node_modules and package.jason as well.

npm install -D tailwindcss

Tailwind CSS configurations

To populate tailwind.config.js run the command below.

npx tailwindcss init

Tailwind CSS folder setup

In my case, I created “src” folder where I store all my pages. Therefore I configured tailwind.config.js to…

  content: ["./src/**/*.{html,js}"],

tailwind.config.js

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

Tailwind directives

Make sure that you’ve created “src/input.css”

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

Toggle dark mode

Let’s add the dark mode manual toggle of tailwind css using the class strategy.

module.exports = {
...
  darkMode: 'class',
...
}

Now that we’ve installed TailwindCSS, configured our template path and added the tailwind directives, let’s now start the build process of our application.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Once you’ve run the command above, you’ll notice that there is a new directory which is “dist/output.css”

Here is the final directory tree of our project.

Directory tree

HTML

We are almost finish!

To make this tutorial shorter. I provided my complete files in this link 🚀 . I’ll just discuss the important parts of what I did in my HTML and JavaScript.

Toggle button

Make sure to use a checkbox type in your toggle button. In addition, I have included CSS in my toggle button to make it move once you’ve clicked it.

        .toggle-checkbox:checked {
            right: 0;
            border-color: #68d391;
        }

        .toggle-checkbox:checked+.toggle-label {
            background-color: #68d391;
        }

JavaScript

Let’s now discuss the JavaScript part of our project. I assume that you are knowledgeable in JavaScript. I cannot discuss all of it in this tutorial so please bear with me.

First we need to get the specific element of our toggle button and add an EventListener to it…

document.getElementById('toggle').addEventListener('change', function () {
...
})

Inside this block let’s add an if else statement to add or remove the ‘dark’ class in our document. The reason for this is to activate what you’ve put in the dark: section of each HTML element.

In the example above, the default class names are those who doesn’t have “dark:”

document.getElementById('toggle').addEventListener('change', function () {
  if (this.checked) {
   document.documentElement.classList.add('dark')
  } else {
   document.documentElement.classList.remove('dark')
  }
})

That’s all! Well, I consider this as basic way to implement it. Again, if you’ve read this article I am open for more advanced way to implement dark mode using TailwindCSS.

Anton Caballes is a student, software developer, and cybersecurity enthusiast. He has a Bachelor’s degree in Information and Communications Technology from San Beda University and is currently pursuing a Master’s in Information Technology at King’s Own Institute Sydney. Check out his work and learning on his personal website and Medium page at https://medium.com/@antonraphaelcaballes. Connect with Anton on LinkedIn to learn more about his achievements and future endeavors.