Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/markusantonwolf/tailwind-css-plugin-filters

Extensions to the default Tailwind CSS config and added useful css filter utilities.
https://github.com/markusantonwolf/tailwind-css-plugin-filters

tailwind-css tailwind-css-plugin tailwind-plugin tailwindcss tailwindcss-extension tailwindcss-plugin

Last synced: about 1 month ago
JSON representation

Extensions to the default Tailwind CSS config and added useful css filter utilities.

Awesome Lists containing this project

README

        

# Tailwind CSS Plugin Filter utilities

This plugins adds some filter utilities to your configuration. Based on the default colors this plugin renders the following utilities for you:

- drop-shadow
- drop-shadow-{SIZE}
- sizex: sm, md, lg, xl and 2xl
- drop-shadow-{COLOR}-{INDEX}
- Tailwind CSS default colors
- backdrop-blur
- Sizes from 1 - 5
- bg-blur
- Sizes from 1 - 5
- blur
- Sizes from 1 - 5

The drop shadow utility uses CSS custom properties to make it easier to define your favorite style. **You can find a list of all generated utilities in the [list of all utilities](https://github.com/markusantonwolf/tailwind-css-plugin-filters/blob/master/public/utilities.css).**

## Install

1. Install the plugin:

```bash
# Using npm
npm install @markusantonwolf/tailwind-css-plugin-filters --save-dev

# Using Yarn
yarn add @markusantonwolf/tailwind-css-plugin-filters -D
```

2. Add it to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@markusantonwolf/tailwind-css-plugin-filters')
]
}
```

## Usage

```html




```

## Features

- CSS filters:
- backdrop-filter: blur
- filter: drop-shadow
- filter: blur
- Options:
- variants: defines the variants to be created | default: ["responsive"]
- utilities: defines the utilities to be created | default: ["drop-shadow","blur","backdrop-blur"]
- debug: shows the new utilities | default: false

## Options example

```js
// tailwind.config.js
module.exports = {
// ...
plugins: [
require("@markusantonwolf/tailwind-css-plugin-filters")({
variants: ["responsive"],
utilities: ["drop-shadow", "blur", "backdrop-blur", "bg-blur"],
debug: false,
}),
]
}
```

## Licence

Tailwind CSS Plugin Filter utilities is released under the [MIT license](https://github.com/markusantonwolf/tailwind-css-plugin-filters/blob/master/licence.md) & supports modern environments.

## Copyright

© 2020 Markus A. Wolf