Tailwind CSS Invert

The invert utility class in Tailwind CSS is used to invert the color of an element.

Syntax

<div class="invert-{amount}">{/* Content */}</div>

• The {amount} parameter is optional and it represents the intensity of the inversion. It can be any value between 0 and 100.

Example

<div class="bg-gray-900 text-white p-4 invert">{/* Content */}</div>

In the above example, the invert utility class is used to invert the color of the element with a gray background and white text.

Output

The output of the above example will look like this:

Explanation

The invert utility class in Tailwind CSS applies the filter: invert() property to an element, which inverts the color of the element.

The {amount} parameter represents the intensity of the inversion. A value of 0 means no inversion, and a value of 100 means complete inversion.

If no {amount} parameter is provided, the inversion will be complete.

Use

The invert utility class can be used to create inverted elements such as buttons, images, and backgrounds.

It can also be used in conjunction with other utility classes to create unique designs and effects.

Important Points

• The invert utility class can be used to invert the color of an element.
• The {amount} parameter is optional and represents the intensity of the inversion.
• A value of 0 means no inversion, and a value of 100 means complete inversion.
• The invert utility class can be used with other utility classes to create unique designs and effects.

Summary

The invert utility class in Tailwind CSS is used to invert the color of an element. It can be used with or without the {amount} parameter, and can be used to create unique designs and effects when combined with other utility classes.