Configuring Tailwind’s Styles

In this lesson, we’ll learn to modify the default themes by adding new plugins, variants, and specifications to Tailwind’s styles.

Example of configuring Tailwind’s styles

The tailwind.config.js file offers multiple ways to configure Tailwind’s styles, such as extending the default theme, creating new variants and plugins, and more. Most of them are too advanced for this tutorial. But there’s a simple option that we can try right now—the darkMode option.

There’s a growing trend in modern web development to offer a dark theme or mode. A dark theme doesn’t just look cool. It also aids the reading experience, making it more comfortable for the eyes.

By default, the darkMode option uses the prefers-color-scheme CSS media feature, which automatically changes the theme based on a user’s OS preferences. But what if we want to allow users to switch the theme manually? Let’s see how we can do that.

Adding the dark mode

First, we need to add the dark mode in the tailwind.config.js file. We’ll open the file and add the darkMode option with a value of 'class'.