Filter

Tailwind CSS version

v2.1+

Utilities for enabling and disabling filters on an element.

Default class reference

Usage

Use the filter utility to enable filters (in combination with other filter utilities like blur or grayscale), and the filter-none utility to remove filters.

<div class="filter grayscale blur-md contrast-200 ...">
  <!-- ... -->
</div>

Responsive

To control filters at a specific breakpoint, add a {screen}: prefix to any existing filter utility. For example, use md:filter-none to apply the filter-none utility at only medium screen sizes and above.

<div class="filter blur-lg md:filter-none ...">
  <!-- ... -->
</div>

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

Customizing

Variants

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

You can control which variants are generated for the filter utilities by modifying the filter 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: {
        // ...
+       filter: ['hover', 'focus'],
      }
    }
  }

Disabling

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

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

←Background Blend Mode Blur→

Edit this page on GitHub