Invert

Usage

Use the invert and invert-0 utilities alongside the filter utility to whether an element should be rendered with inverted colors or normally.

<div class="filter invert ...">
  <!-- ... -->
</div>

Responsive

To control an element’s invert filter at a specific breakpoint, add a {screen}: prefix to any existing invert utility. For example, use md:invert-0 to apply the invert-0 utility at only medium screen sizes and above.

<div class="filter invert md:invert-0 ...">
  <!-- ... -->
</div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

You can customize which invert utilities are generated using the invert key in the theme section of your tailwind.config.js file.

  // tailwind.config.js
  module.exports = {
    theme: {
+     extend: {
+       invert: {
+         25: '.25',
+         50: '.5',
+         75: '.75',
+       }
+     }
    }
  }

Learn more about customizing the default theme in the theme customization documentation.

Variants

By default, only responsive variants are generated for invert utilities.

You can control which variants are generated for the invert utilities by modifying the invert property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       invert: ['hover', 'focus'],
      }
    }
  }

Disabling

If you don't plan to use the invert utilities in your project, you can disable them entirely by setting the invert property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     invert: false,
    }
  }