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

Tailwind CSS - Grayscale

Quiz

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

Tailwind CSS Grayscale Classes

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

Class	CSS Properties
grayscale-0	filter: grayscale(0);
grayscale	filter: grayscale(100%);

Functionality of Tailwind CSS Grayscale Classes

grayscale-0: This class is used to remove grayscale filter from an element.
grayscale: This class is used to apply a grayscale filter to an element.

Tailwind CSS Grayscale Classes Example

The following example will illustrate the different visibilities and utilities of Tailwind CSS Grayscale 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 Grayscale Classes
    </h2>
    <div class="flex gap-6 flex-wrap">
        <div>
            <h3 class="text-lg font-medium">grayscale-0</h3>
            <img class="grayscale-0 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg font-medium">grayscale</h3>
            <img class="grayscale object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>

Print Page