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];
}

Readme

Keywords

none

Package Sidebar

Install

npm i tailwindcss-filters

Weekly Downloads

4,119

Version

3.0.0

License

ISC

Unpacked Size

7.47 kB

Total Files

6

Last publish

Collaborators

  • benface