Neatly Packaged Modules

    @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

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    69

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    4.49 MB

    Total Files

    9

    Last publish

    Collaborators

    • markusantonwolf