The invert utilities in Tailwind CSS are used to invert the colors of an element, such as an image. These utilities use the CSS invert() filter function to control the degree of color inversion.
invert-0: Prevents color inversion and preserves the element's original colors.invert: Fully inverts the colors of an element.invert-<number>: Applies a specified percentage of color inversion, such asinvert-50.invert-[<value>]: Applies a custom color inversion value.invert-(<custom-property>): Uses a CSS custom property to specify the inversion value.
Syntax
<element class="invert">...</element><element class="invert-0">...</element>
Example: The following example demonstrates how to use the invert and invert-0 classes to invert the colors of an image.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Invert Class</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="p-6 text-center">
<h1 class="mb-4 text-3xl font-bold text-green-600">
Tailwind CSS Invert Class
</h1>
<div class="flex flex-wrap justify-center gap-6">
<div>
<h2 class="mb-2 font-semibold">Inverted Image</h2>
<img
class="w-64 rounded-lg invert"
src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=500"
alt="Mountain landscape with inverted colors">
</div>
<div>
<h2 class="mb-2 font-semibold">Original Image</h2>
<img
class="w-64 rounded-lg invert-0"
src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=500"
alt="Mountain landscape with original colors">
</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Output:
- Inverted Image: Displays the image with its colors fully inverted.
- Original Image: Displays the image with its original colors.