https://github.com/flornkm/dither-plugin
A plugin for tailwindcss to dither things.
https://github.com/flornkm/dither-plugin
css dither tailwind
Last synced: 8 months ago
JSON representation
A plugin for tailwindcss to dither things.
- Host: GitHub
- URL: https://github.com/flornkm/dither-plugin
- Owner: flornkm
- License: mit
- Created: 2025-05-14T21:00:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-20T09:22:10.000Z (9 months ago)
- Last Synced: 2025-09-20T10:21:41.729Z (9 months ago)
- Topics: css, dither, tailwind
- Language: CSS
- Homepage: https://dither.floriankiem.com
- Size: 11.6 MB
- Stars: 44
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# TailwindCSS Dither Plugin (Safari Compatible)
A TailwindCSS plugin that provides Safari-compatible dither effects without relying on SVG filters making dithering easy, performant, and accessible.
## Usage
To start using the `dither-plugin`, install with the following command:
```
npm install dither-plugin
```
Then, add the plugin to your `index.css` file where you also reference TailwindCSS:
```css
@import "tailwindcss";
@import "dither-plugin";
```
To activate it, add a `
` around the elements that should be dithered and add the `dither` class to it.
```tsx
```
You can play around with different sizes, e.g. `dither-xl`.
Note that the class won't be applied when added directly to an img or video element, as these elements don't support `::after` pseudo-elements.
It's as easy as that! You can play around with it.
## Documentation and examples
A documentation and examples can be found [here](https://dither.floriankiem.com/).
Feel free to follow me on Twitter [@flornkm](https://twitter.com/flornkm) or on [GitHub](https://github.com/flornkm).
## License
MIT