TailwindCSS plugin for adding dither effects.
npm install dither-plugin!masked dither image of a flower
A TailwindCSS plugin that provides Safari-compatible dither effects without relying on SVG filters making dithering easy, performant, and accessible.
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.
.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.
A documentation and examples can be found here.
Feel free to follow me on Twitter @flornkm or on GitHub.
MIT