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 :

• HTML

• Tailwind CSS

• JavaScript

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:

1. Open your terminal and run the Tailwind CSS install command.

npm install -D tailwindcssnpx tailwindcss init

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

2. 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.

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

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

4. 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.

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

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.

    href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
              Pieces for Developers        Copy and Save code with Pieces                  Convert from one programming language to another using Pieces                          Speed up Development Time using the Pieces Copilot                                       class="border p-4 mt-5"          >            Click here to switch theme

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:

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

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!