Tailwind CSS Saturate

The Tailwind CSS saturate class is an inbuilt function that is used to super-saturate or desaturate the input image. In CSS, we do that by using the CSS saturate() Function. Tailwind CSS newly added feature brightness in 2.1 version.

Saturate Classes:

• saturate-0: This class used to set the saturate value, equivalent to CSS saturate(0).
• saturate-50: This class used to set the saturate value, equivalent to CSS saturate(50).
• saturate-100: This class used to set the saturate value, equivalent to CSS saturate(100).
• saturate-150: This class used to set the saturate value, equivalent to CSS saturate(150).
• saturate-200: This class used to set the saturate value, equivalent to CSS saturate(200).

Syntax:

<element class="filter saturate-{amount}">..</element>

Example:

Output: