Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Invert

Quiz

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>

Print Page