Tailwind Theming: Create Light and Dark Modes with Tailwind CSS

Does anyone get furious when they visit a page and it doesn’t have a dark mode feature? Aside from the fact that it's just fun to toggle the light/dark mode feature on a webpage, it also helps us control how much screen light our eyes consume. In particular, clicking onto a site with extremely bright light at night is not the best experience.

Modern web pages give users the flexibility of toggling between light mode and dark mode, which makes it very important for front-end developers to implement this feature using best practices. The ability to toggle the Tailwind CSS dark theme on and off enhances readability for users across different groups.

Tailwind CSS is a utility-first CSS framework that offers developers the flexibility to implement Tailwind CSS components right in an HTML file without creating a separate CSS file. Tailwind saves a ton of time in development as most of the classes have been predefined.

If you're looking to save time as you implement CSS light and dark mode on your webpage, then this Tailwind CSS cheat sheet is for you. In this tutorial, you will learn how to implement light and dark modes in your application with Tailwind theming. Let's get started!

Prerequisites

To properly understand this article, you need basic knowledge of :

Adding Tailwind CSS to our Project

The first thing we want to do is install Tailwind CSS and its configurations so we can use it in our application. To do so:

Open your terminal and run the Tailwind CSS install command.

npm install -D tailwindcss
npx tailwindcss init

This installs the packages needed to implement Tailwind CSS in our project.

Configure your template paths in your tailwind.config.js file which is among the packages that have been added to our project.

// configure your template paths
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

This configuration ensures that Tailwind CSS is available in all files that end in html or js. If we were working with a web framework like React or Vue, we would configure the paths so it accepts the jsx and vue file extensions and offers support for Tailwind, but we're fine with the html and js extensions for this project.

Add the tailwind directive to your root input.css file.

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

Open your terminal and run the Tailwind CSS build process.

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

The build process basically tells Tailwind to take all the classes defined in the input.css file and translate them to normal CSS in the output.css file.

The last piece of action will be to add the compiled CSS (the output.css file) to the <head> tag in our index.html file.

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Tutorial</title>
     <link href="/dist/output.css" rel="stylesheet" />
  </head>

Now we can proceed to styling elements with CSS.

Configuring `Tailwind.config.js` file

As the first step in implementing Tailwind theming in our project, we configure our Tailwind.config.js file so it accepts the dark utility class.

// tailwind.config.js
module.exports = {
 content: ["./src/**/*.{html,js}"],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [],
};

This enables the dark class to be available when we want to toggle between light and dark mode.

Implementation

Let's create a simple webpage to show that our logic works. Here's a simple code snippet that outputs some text on the screen.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Tutorial</title>
    <link href="/dist/output.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="dark:bg-slate-800 flex flex-col items-center justify-center">
      <div class="">
        <h1 class="text-8xl text-center">Pieces for Developers</h1>
        <li class="text-2xl text-center">Copy and Save code with Pieces</li>
        <li class="text-2xl text-center">
          Convert from one programming language to another using Pieces
        </li>
        <li class="text-2xl text-center">
          Speed up Development Time using the Pieces Copilot
        </li>
         <div class="flex flex-col items-center justify-center">
          <button
            class="border p-4 mt-5"
          >
            Click here to switch theme
          </button>
        </div>
      </div>
    </div>
  </body>
</html>

Here I've created a simple webpage that displays the use cases of the Pieces for Developers app. For a better UI look, we added the Poppins font from Google Fonts and some Tailwind CSS styling so our elements look nice. Also, we created a Tailwind CSS button that controls the behavior of the themes. When we click on the button, we want to toggle the theme on and off. Here's how the output looks:

That looks good, but this is just static HTML. We want our button to work and control the Tailwind CSS themes. We can do that by creating a set of styles in our CSS that we want to implement in dark mode only, and then using JavaScript code to control the button. Let's add our CSS style for dark mode:

.darkModeEnabled {
     background-color: rgb(12, 12, 23);
     color: white;
   }

This piece of code changes the text color to white and the background color to black when dark mode is enabled. Now let's see how we would enable our dark mode. We head over to the button element and add this simple JavaScript code:

<button
      class="border p-4 mt-5"
      onclick="document.body.classList.toggle('darkModeEnabled')"
       >
       Click here to switch theme
    </button>

What we have done here is add the darkModeEnabled class when the button is toggled, so it controls the Tailwind CSS theme. Let's see how it behaves:

And that's perfect! Just the way we expect it to behave. It doesn't just end at creating a CSS light and dark theme. You can choose any background color! Let's try this out using a custom-themed background. All I do is change the background color in the darkModeEnabled class to a value or color I want and this is the output:

Conclusion

By following this Tailwind CSS tutorial, you have learned about Tailwind theming, the logic behind creating light and dark themes, and how to create themes of several colors using Tailwind CSS. It doesn't end here— you can check out the Tailwind CSS documentation or our blog post on replacing complex classes with Tailwind CSS to learn more. Have fun!