tailwind-css
  1. tailwind-css-dark-mode
PreviousNext

Tailwind CSS Dark Mode

Dark mode is a popular trend in website design, as it has been known to provide better readability and reduce eye strain. Tailwind CSS is a popular utility-based CSS framework that offers several features, including a dark mode. In this article, we'll explore how to use Tailwind CSS's dark mode and provide some examples and explanations.

Syntax

To enable dark mode in Tailwind CSS, you need to add a dark class to the body tag. Then, prefix all your dark mode utilities with the .dark class. Here's an example:

<body class="dark">
    <div class="bg-gray-800 dark:bg-gray-900">
        <p class="text-white dark:text-gray-200">Hello World!</p>
    </div>
</body>

As you can see, the bg-gray-800 and text-white classes are for the light mode, while the dark:bg-gray-900 and dark:text-gray-200 classes are for the dark mode.

Examples

Here are a few examples of how you can implement dark mode in Tailwind CSS:

Example 1: Switch Toggle

<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
  <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
  <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>

<div class="flex items-center justify-between">
  <span class="text-gray-700 dark:text-gray-400">Light Mode</span>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>
  <span class="text-gray-700 dark:text-gray-400">Dark Mode</span>
</div>

Example 2: Navbar

<nav class="bg-gray-900">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <a href="/">
                        <img class="h-8 w-8" src="/img/logo.svg" alt="Logo">
                    </a>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline">
                        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-800  dark:bg-gray-700 focus:outline-none focus:text-white">Home</a>
                        <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 dark:hover:text-gray-200">About</a>
                        <a href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700 dark:hover:text-gray-200">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

Output

The output of the above examples will look as follows:

Tailwind CSS Dark Mode Example

Explanation

In the first example, we have created a switch toggle to switch between light and dark mode. We have used the .text-gray-700 and .bg-blue-500 classes for the light mode, while the .dark:text-gray-400 and .dark:bg-blue-900 classes for the dark mode.

In the second example, we have created a navigation bar with links to the Home, About, and Contact pages. We have used the .bg-gray-900, .text-white, .text-gray-300, .hover:text-white, and .hover:bg-gray-700 classes for the light mode, while the .dark:bg-gray-700, .dark:hover:text-gray-200, and .focus:bg-gray-700 classes for the dark mode.

Use

To use Tailwind CSS's dark mode, you only need to add a few classes to your HTML code. You can use the dark: prefix to apply different styles to the dark mode. By default, all Tailwind CSS utilities work in light mode. However, if you want a utility to work in the dark mode, you need to prefix it with the dark: class.

For example, if you want to change the background color of an element in light mode, you can use the following class:

<div class="bg-gray-400">
    <!-- Your content here -->
</div>

If you want to change the background color of the same element in dark mode, you need to use the following class:

<div class="dark:bg-gray-900">
    <!-- Your content here -->
</div>

Similarly, you can use the dark: prefix with any Tailwind CSS utility to apply different styles to the dark mode.

Important Points

  • The dark class needs to be added to the body tag to enable dark mode in Tailwind CSS.
  • To apply different styles to the dark mode, you need to prefix all your dark mode utilities with the .dark class.
  • You can use the dark: prefix with any Tailwind CSS utility to apply different styles to the dark mode.

Summary

In this article, we have learned how to use Tailwind CSS's dark mode and how to apply different styles to the dark mode. We have also provided some examples and explanations of using Tailwind CSS's dark mode. By following these guidelines, you can easily create stylish dark mode designs for your web projects.

Responsive DesignReusing Styles
Published on: