Skip to content
This repository has been archived by the owner on Feb 22, 2022. It is now read-only.

Tailwind CSS plugin to generate filter and backdrop filter utilities

License

Notifications You must be signed in to change notification settings

benface/tailwindcss-filters

Repository files navigation

⛔️ DEPRECATED

Tailwind CSS 2.1+ has built-in filter and backdrop-filter utilities such as blur, grayscale, sepia, etc. Please use them instead of this plugin. Thank you!

Filters Plugin for Tailwind CSS

Requirements

This plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (npm install tailwindcss-filters@2.x).

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

About

Tailwind CSS plugin to generate filter and backdrop filter utilities

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published