@markusantonwolf/tailwind-css-plugin-filters

1.2.1 • Public • Published

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:
# Using npm
npm install @markusantonwolf/tailwind-css-plugin-filters --save-dev

# Using Yarn
yarn add @markusantonwolf/tailwind-css-plugin-filters -D
  1. Add it to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@markusantonwolf/tailwind-css-plugin-filters')
  ]
}

Usage

<div class="drop-shadow drop-shadow-xl drop-shadow-gray-100"></div>
<div class="bg-blur-5"></div>
<div class="blur-5"></div>

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

// 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

© 2020 Markus A. Wolf https://www.markusantonwolf.com

Readme

Keywords

none

Package Sidebar

Install

npm i @markusantonwolf/tailwind-css-plugin-filters

Weekly Downloads

24

Version

1.2.1

License

MIT

Unpacked Size

4.49 MB

Total Files

9

Last publish

Collaborators

  • markusantonwolf