Skip to content
Tailwind CSS plugin to generate filter and backdrop filter utilities
Branch: master
Clone or download
Latest commit 4b5a3f8 May 17, 2019

README.md

Filters Plugin for Tailwind CSS

Installation

npm install tailwindcss-filters

Usage

// tailwind.config.js
{
  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];
}
You can’t perform that action at this time.