What is Dark variant usage in Tailwind?

Tailwindmarkup~5 mins

Dark variant usage in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Dark variant helps you make your website look good in dark mode. It changes colors when users prefer dark backgrounds.

You want your website to support dark mode automatically.

You want text or backgrounds to change color in dark mode for better reading.

You want buttons or links to look different in dark mode.

You want to improve user experience by respecting system color preferences.

Syntax

Tailwind

dark:<utility-class>

The dark: prefix applies styles only when dark mode is active.

You need to enable dark mode in your Tailwind config for this to work.

Examples

The background is white normally, but dark gray in dark mode.

Tailwind

<div class="bg-white dark:bg-gray-800">Content</div>

The text is black normally, but white in dark mode.

Tailwind

<p class="text-black dark:text-white">Hello</p>

The button is blue normally, but a darker blue in dark mode.

Tailwind

<button class="bg-blue-500 dark:bg-blue-700">Click me</button>

Sample Program

This example shows a box and button that change colors when dark mode is toggled. Click anywhere to switch modes.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Dark Variant Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class'
    }
  </script>
  <style>
    /* Just to center content */
    body {
      display: flex;
      height: 100vh;
      justify-content: center;
      align-items: center;
      margin: 0;
    }
  </style>
</head>
<body class="bg-white dark:bg-gray-900">
  <div class="p-6 rounded-lg shadow-lg bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
    <h1 class="text-2xl font-bold mb-4">Dark Variant Example</h1>
    <p class="mb-2">This box changes colors based on dark mode.</p>
    <button class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white dark:text-gray-900 rounded">
      Button
    </button>
  </div>
  <script>
    // Toggle dark mode on click anywhere
    document.body.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
    });
  </script>
</body>
</html>

OutputSuccess

Important Notes

Dark mode must be enabled in Tailwind config with darkMode: 'class' or 'media'.

Using darkMode: 'class' means you control dark mode by adding/removing the dark class on html or body.

Using darkMode: 'media' applies dark styles automatically based on user system preferences.

Summary

The dark: prefix applies styles only in dark mode.

You must enable dark mode in Tailwind config to use dark variants.

Dark variants help make your site look good and readable in dark mode.