Modern CSS with Tailwind, 2nd Edition

Filters

CSS defines a lot of filters that affect the display of an element. Tailwind allows you to use them; here’s a set of the most useful.

You can blur the element with blur and blur the background with bg-blur. Technically, that’s an 8-pixel blur. Tailwind provides one smaller blur, blur-sm, and four larger ones, blur-md, blur-xl, blur-2xl, and blur-3xl (adding bg- to any of these works for background only).

You can make an element grayscale with grayscale and negate it with grayscale-0. Similarly, you can make an element sepia toned with sepia and negate it with sepia-0.

You can adjust the brightness of an element with brightness-{level}, where the level can be 0, 50, 75, 90, 95, 100, 105, 110, 125, 150, or 200, where brightness-100 is 100%, ...