Tailwind CSS - Invert


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

Tailwind CSS Invert Classes

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

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

Functionality of Tailwind CSS Invert Classes

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

Tailwind CSS Invert Classes Example

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