This package has been deprecated

Author message:

Use Tailwind's filter utilities

tailwindcss-filters

3.0.0 • Public • Published

Filters Plugin for Tailwind CSS

Installation

npm install tailwindcss-filters

Usage

// tailwind.config.js
module.exports = {
  theme: {
    filter: { // defaults to {}
      'none': 'none',
      'grayscale': 'grayscale(1)',
      'invert': 'invert(1)',
      'sepia': 'sepia(1)',
    },
    backdropFilter: { // defaults to {}
      'none': 'none',
      'blur': 'blur(20px)',
    },
  },
  variants: {
    filter: ['responsive'], // defaults to ['responsive']
    backdropFilter: ['responsive'], // defaults to ['responsive']
  },
  plugins: [
    require('tailwindcss-filters'),
  ],
};

This plugin generates the following utilities:

/* configurable with the "filter" theme object */
.filter-[key] {
  filter: [value];
}
 
/* configurable with the "backdropFilter" theme object */
.backdrop-[key] {
  backdrop-filter: [value];
}

/tailwindcss-filters/

    Package Sidebar

    Install

    npm i tailwindcss-filters

    Weekly Downloads

    3,940

    Version

    3.0.0

    License

    ISC

    Unpacked Size

    7.47 kB

    Total Files

    6

    Last publish

    Collaborators

    • benface