Tailwind CSS Plugin Filter utilities

This plugins adds some filter utilities to your configuration. Based on the default colors this plugin renders the following utilities for you:

- drop-shadow
- drop-shadow-{SIZE}
- sizex: sm, md, lg, xl and 2xl
- drop-shadow-{COLOR}-{INDEX}
- Tailwind CSS default colors
- backdrop-blur
- Sizes from 1 - 5
- bg-blur
- Sizes from 1 - 5
- blur
- Sizes from 1 - 5

The drop shadow utility uses CSS custom properties to make it easier to define your favorite style. You can find a list of all generated utilities in the list of all utilities.

Install

1. Install the plugin:

``bash # Using npm npm install @markusantonwolf/tailwind-css-plugin-filters --save-dev

# Using Yarn yarn add @markusantonwolf/tailwind-css-plugin-filters -D`

2. Add it to your tailwind.config.js file:

`js // tailwind.config.js module.exports = { // ... plugins: [ require('@markusantonwolf/tailwind-css-plugin-filters') ] }`

`Usage`

`html


Features
-   CSS filters:
    - backdrop-filter: blur
    - filter: drop-shadow
    - filter: blur
-   Options:
     - variants: defines the variants to be created | default: ["responsive"]
     - utilities: defines the utilities to be created | default: ["drop-shadow","blur","backdrop-blur"]
     - debug: shows the new utilities | default: false
Options example

`js // tailwind.config.js module.exports = { // ... plugins: [ require("@markusantonwolf/tailwind-css-plugin-filters")({ variants: ["responsive"], utilities: ["drop-shadow", "blur", "backdrop-blur", "bg-blur"], debug: false, }), ] }``

Licence

Tailwind CSS Plugin Filter utilities is released under the MIT license & supports modern environments.

Copyright