tailwindcss-filters

A plugin that provides utilities for CSS filters and backdrop filters.

Installation

Install the plugin from npm:

# Using npm
npm install @jinsung.lim/tailwindcss-filters

# Using Yarn
yarn add @jinsung.lim/tailwindcss-filters

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@jinsung.lim/tailwindcss-filters'),
    // ...
  ],
}

Usage

View the live demo

<!-- Filter -->
<img class="filter filter-blur-5 ..." />
<img class="filter filter-bright-50 ..." />
<img class="filter filter-contrast-200 ..." />

<!-- Backdrop Filter -->
<img class="backdrop backdrop-blur-5 ..." />
<img class="backdrop backdrop-bright-50 ..." />
<img class="backdrop backdrop-contrast-200 ..." />

More filters & backdrop filters are available. View the live demo to see the full list of provided utilities.