Tailwind CSS Invert

The invert class is an inbuilt function that is used to apply a filter to the image to set the invert version of the color of the sample image. In CSS, we do that by using the CSS invert() Function.

Invert Classes:

invert-0: This class is used to represent the original color.
invert: This class is used to represent the inverted color of that original color.

Syntax:

<element class="filter invert | invert-0">..</element>

Example:

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <link href= 
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"

        rel="stylesheet"> 

</head> 

<body class="text-center mx-20 space-y-2"> 

    <h1 class="text-green-600 text-5xl font-bold"> 

        GeeksforGeeks 

    </h1> 

    <b>Tailwind CSS Invert Class</b> 

    <div class="grid grid-flow-col text-center mx-44"> 

        <img class="rounded-lg filter invert" 

             src= 

"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg" 

             alt="image"> 

        <img class="rounded-lg filter invert-0" 

             src= 

"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg" 

             alt="image"> 

    </div> 

</body> 

</html>

Output:

Article Tags :

CSS

Web Technologies

Tailwind CSS

Tailwind-Filters