Tailwind CSS Grayscale

Grayscale refers to an image or color with no saturation and purely black and white tones. In Tailwind CSS, grayscale utility classes can be used to adjust the grayscale level of an element. It can be helpful for creating elegant & professional designs.

Syntax

The syntax for using grayscale utility classes in Tailwind CSS is as follows:

<div class="grayscale-{amount}"></div>

Here, {amount} refers to the degree of grayscale you want to apply, an integer between 0 and 100.

Example

Let's say you want to apply a 60% grayscale level to an image. Here's how you would use the grayscale utility class:

<img src="your-image.jpg" class="grayscale-60" alt="Your image">

Output

The above code will apply a 60% grayscale level to the image. The image will have a reduced saturation and will appear black and white.

Explanation

The grayscale-{amount} utility classes are a part of the filter family of utility classes in Tailwind. The filter property enables you to add graphical filters to an element, which includes grayscale, blur, brightness, sepia, hue rotation, etc.

The grayscale filter reduces the saturation or intensity of color. The {amount} specifies the degree of intensity, ranging from 0% (no change) to 100% (completely grayscale).

Use

Grayscale utility classes can be applied to any HTML element that supports the filter property. Here are some examples:

<!-- Adding grayscale to a div -->
<div class="h-64 w-64 bg-gray-500 grayscale-30"></div>

<!-- Adding grayscale to an image -->
<img src="your-image.jpg" class="grayscale-80" alt="Your image">

<!-- Adding grayscale to a button -->
<button class="bg-gray-900 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded grayscale-50">Click me</button>

Summary

Tailwind CSS grayscale utility classes enable adjust the grayscale level of an element and make the design look more elegant and professional. The syntax for using the grayscale utility classes is simple, and it can be applied to any HTML element that supports the filter property.