Tailwind CSS - Grayscale


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>