tailwind-filter-utilities v2.0.0

Filter Utilities for Tailwind CSS

Composable filter utilities for Tailwind CSS.

The problem with the filter property is that filters can't be composed using different classes. This plugin uses the same trick Adam Wathan used to get font-variant-numeric utilities working, which makes each and every filter function totally composable!

For example, if you want to increase the brightness of a button when it's being hovered, you can use the hover:brightness-125 utility:

<button class="[your button utils] hover:brightness-125">
    Button text
</button>

And because the filters are composable, you can combine them however you wish. For instance, this will make the element blurry and slightly dim:

<div class="blur brightness-75"></div>

The backdrop-filter property is also supported. Simply prefix the various filter utilities with bg- to get the backdrop variant of the filter. For example, bg-blur bg-brightness-125 will apply backdrop-filter: blur(1px) brightness(1.25);

For that sweet, sweet, frosty Apple effect, you can, for instance, combine the bg-white, bg-opacity-75, and bg-blur-xl classes, as such:

<div class="fixed top-0 left-0 w-full h-16 shadow-sm bg-white bg-opacity-75 bg-blur-xl">
  Frosty Sticky Header
</div>

Installing

Add tailwind-filter-utilities to your NPM dependencies:

npm add -D tailwind-filter-utilities

Add the plugin to your tailwind.config.js:

plugins: [
  require('tailwind-filter-utilities'),
],

Supported Filters

The supported filters are blur, brightness, grayscale, and drop shadow.

Blur

Brightness

Grayscale

Drop Shadow

Configuration

This plugin is configured like any other Tailwind plugin. For example, if you wish to add additional blur levels, you would do as follows:

// tailwind.config.js
module.exports = {
  theme: {
    extends: {
      blur: {
        '10xl': '9000px',
        // ...
      },
    }
  },
  plugins: [
    require('tailwind-filter-utilities'),
    // ...
  ],
}

For more details on what you can configure and how, please take a look at the default configuration file.

Contributing

If you encounter any problems, or have ideas to improve the plugin, please don't hesitate to submit a pull request. If it's a bug fix, or a not entirely terrible idea, I'll definitely push the merge button! (as long as it doesn't break anything)

MIT License

See the LICENSE file for details.