Quick Guide To Tailwind Grayscale
The purpose of this article is to introduce you to the Tailwind grayscale filter.
This class is used to set the grayscale of the image which defines the percentage of the image’s original color that should be displayed.
In a grayscale image, the color values range from black (no light) to white (maximum light), with shades of gray in between. It is often incorporated into visual design and photography to convey a sense of simplicity, neutrality, or timelessness.
Tailwind Grayscale classes
| Classes | Overview |
| grayscale-0 | Grayscale effect is not applied and original image is displayed. |
| grayscale | This class converts the image to a completely grayscale image. |
Syntax
<element class="grayscale-0">..</element>
or
<element class="grayscale">..</element>
This example applies the grayscale filter utility classes on an image for demonstration:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-4">Grayscale Class in Tailwind CSS</p>
<div class="flex justify-evenly w-full text-center mt-8">
<div>
<img class="rounded-lg grayscale w-32 border" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
<p class="font-medium">grayscale</p>
</div>
<div>
<img class="rounded-lg grayscale-0 w-32 border" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg" alt="image">
<p class="font-medium">grayscale-0</p>
</div>
</div>
</body>
</html>
In this example Tailwind grayscale filter classes have been invoked on an image:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-4">Grayscale Class in Tailwind CSS</p>
<div class="flex justify-evenly w-full text-center mt-8">
<div>
<img class="rounded-lg grayscale w-32 border" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp" alt="image">
<p class="font-medium">grayscale</p>
</div>
<div>
<img class="rounded-lg grayscale-0 w-32 border" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind1.webp" alt="image">
<p class="font-medium">grayscale-0</p>
</div>
</div>
</body>
</html>
Conclusion
Grayscale is a powerful design element that can be used to create elegant and sophisticated designs.
Tailwind CSS provides developers with a comprehensive set of grayscale utilities that can be used to adjust the color of an element quickly and easily. With a simple naming convention and a range of shades, Tailwind CSS makes it easy for developers to create stunning grayscale designs.
