Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Saturate

Quiz

Tailwind CSS Saturate is a utility class used to apply a Saturate filter to an element.

Tailwind CSS Saturate Classes

The following is the list of Tailwind CSS Saturate Classes that are used to effectively apply Saturate filters.

Class	CSS Properties
saturate-0	filter: saturate(0);
saturate-50	filter: saturate(.5);
saturate-100	filter: saturate(1);
saturate-150	filter: saturate(1.5);
saturate-200	filter: saturate(2);

Functionality of Tailwind CSS Saturate Classes

saturate-*: This class is used to apply a saturate filter to an element. {*} here represents the value of saturation that can be set as per the need.

Tailwind CSS Saturate Classes Example

The following example will illustrate the different visibilities and utilities of Tailwind CSS Saturate classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Saturate Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">saturate-0</h3>
            <img class="saturate-0 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-50</h3>
            <img class="saturate-50 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-100</h3>
            <img class="saturate-100 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-150</h3>
            <img class="saturate-150 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-200</h3>
            <img class="saturate-200 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>

Print Page