https://github.com/benface/tailwindcss-filters

Tailwind CSS plugin to generate filter and backdrop filter utilities
https://github.com/benface/tailwindcss-filters

tailwindcss tailwindcss-plugin

Last synced: 16 days ago
JSON representation

Tailwind CSS plugin to generate filter and backdrop filter utilities

• Host: GitHub
• URL: https://github.com/benface/tailwindcss-filters
• Owner: benface
• License: isc
• Archived: true
• Created: 2018-08-13T04:09:14.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2022-02-22T12:21:07.000Z (over 2 years ago)
• Last Synced: 2024-08-01T06:22:11.366Z (3 months ago)
• Topics: tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage:
• Size: 1.09 MB
• Stars: 161
• Watchers: 4
• Forks: 8
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

• tailwindcss-awesome - benface/tailwindcss-filters - Tailwind CSS plugin to generate filter and backdrop filter utilities <br/> (8 stars / 2020-07-19 / 21 commits ) (Running the update / By Popularity)

README

        
# ⛔️ DEPRECATED

Tailwind CSS 2.1+ has built-in `filter` and `backdrop-filter` utilities such as [`blur`](https://tailwindcss.com/docs/blur), [`grayscale`](https://tailwindcss.com/docs/grayscale), [`sepia`](https://tailwindcss.com/docs/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 [email protected]`).

## Installation

```bash

npm install tailwindcss-filters

```

## Usage

```js

// 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:

```css

/* configurable with the "filter" theme object */

.filter-[key] {

  filter: [value];

}

/* configurable with the "backdropFilter" theme object */

.backdrop-[key] {

  backdrop-filter: [value];

}

```