CSS Filters

[martinstanicio]

CSS Filters

Add support for CSS Filters.

For example:

Grayscale

.filter-grayscale-0 {
  filter: grayscale(0);
}

.filter-grayscale-25 {
  filter: grayscale(25%);
}

.filter-grayscale-50 {
  filter: grayscale(50%);
}

.filter-grayscale-75 {
  filter: grayscale(75%);
}

.filter-grayscale-100 {
  filter: grayscale(100%);
}

Drop shadow

This specially useful when working with SVG:
If you use box-shadow the shadow is squared (unless you apply a border-radius), but if you use filter: drop-shadow() the shadow will be applied to elements in the SVG itself (box-shadow vs filter: drop-shadow).

.filter-drop-shadow {
  filter: drop-shadow(theme("boxShadow.<prefered-shadow>"));
}

[Jinsung-L]

I built a plugin for CSS filters and backdrop filters.
You can apply multiple filters at once using this plugin.
https://github.com/Jinsung-L/tailwindcss-filters