Tailwind CSS - Invert

Tailwind CSS: Invert

The invert utility in Tailwind CSS applies a CSS filter that inverts the colors of an element. This is a powerful tool for creating visual effects and is particularly useful for theming, such as creating a dark mode version of a logo or icon.

Invert Classes

The invert functionality is straightforward, with two primary classes.

Class	CSS Properties
invert	filter: invert(1);
invert-0	filter: invert(0);

Core Concepts

• invert: Applies a full 100% color inversion to the element. Black becomes white, white becomes black, blue becomes yellow, etc.
• invert-0: Applies a 0% inversion, effectively removing the filter or ensuring the element is in its normal state. This is useful for resetting the invert filter on certain states (e.g., hover:invert-0).

Practical Example: Dark Mode Theming

One of the most powerful use cases for invert is to adapt monochrome assets (like a black logo) for a dark theme without needing to create a separate, white version of the asset. By using the dark: variant, we can apply the invert filter only when dark mode is active.

Example: Inverting a Logo for Dark Mode

This example simulates a light and dark theme. The logo is black by default, but the dark:invert class flips it to white when the parent container has the dark class.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Invert for Dark Mode</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // To use the 'dark:' variant, we need to tell Tailwind how to toggle it.
    // This config enables toggling based on a 'dark' class on the html element.
    tailwind.config = {
      darkMode: 'class',
    }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-500">

  <div class="p-8 text-center">
    <button onclick="document.documentElement.classList.toggle('dark')" class="px-4 py-2 bg-blue-500 text-white rounded mb-8">Toggle Dark Mode</button>
  </div>

  <main class="max-w-md mx-auto bg-white dark:bg-slate-800 p-8 rounded-xl shadow-lg">
    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Company Card</h2>
    <div class="flex items-center space-x-4">
      <!-- The logo is black by default, but white in dark mode -->
      <img
        src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss/master/src/img/tailwind-mark.svg"
        alt="Tailwind CSS Logo"
        class="h-12 w-12 dark:invert"
      />
      <div>
        <p class="text-lg font-semibold text-gray-900 dark:text-white">Tailwind Labs</p>
        <p class="text-gray-500 dark:text-gray-400">Modern CSS Framework</p>
      </div>
    </div>

    <div class="mt-6">
      <h3 class="font-medium text-gray-900 dark:text-white">Filter States:</h3>
      <div class="flex items-center space-x-6 mt-2">
        <figure>
          <img src="https://placehold.co/100x100/3498db/ffffff" alt="Normal image" class="invert-0 rounded-md"/>
          <figcaption class="text-center text-sm mt-1 dark:text-gray-300">`invert-0`</figcaption>
        </figure>
        <figure>
          <img src="https://placehold.co/100x100/3498db/ffffff" alt="Inverted image" class="invert rounded-md"/>
          <figcaption class="text-center text-sm mt-1 dark:text-gray-300">`invert`</figcaption>
        </figure>
      </div>
    </div>

  </main>
</body>
</html>

Related Utilities & Best Practices

• Filter Context: invert is part of Tailwind’s suite of filter utilities. You can combine it with others like grayscale, sepia, brightness, and saturate.
• Applying to Groups: Use group-hover to apply an invert filter to a child element when hovering over its parent. For example, you can invert an icon when a user hovers over the entire button.
• Performance: CSS filters are hardware-accelerated in modern browsers and are generally performant. However, applying complex filters to very large elements or during rapid animations could impact performance, so always test on target devices.