Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/markusantonwolf/tailwind-css-plugin-filters
- Owner: markusantonwolf
- License: mit
- Created: 2020-12-07T06:24:15.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-21T01:24:01.000Z (almost 4 years ago)
- Last Synced: 2024-11-20T03:13:50.685Z (about 1 month ago)
- Topics: tailwind-css, tailwind-css-plugin, tailwind-plugin, tailwindcss, tailwindcss-extension, tailwindcss-plugin
- Language: HTML
- Homepage:
- Size: 474 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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 - 5The 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