Open In App
Related Articles

Tailwind CSS Invert

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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=
             alt="image">
        <img class="rounded-lg filter invert-0" 
             src=
             alt="image">
          
    </div>
</body>
  
</html>

                    

Output:


Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads