Skip to content

markusantonwolf/tailwind-css-plugin-filters

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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