The filter class is used to set the visual effect of an element. This class is mostly used in image content. In CSS, we do that by using the CSS filter property. Tailwind CSS newly added feature filter in 2.1 version.
Filter Classes:
- filter: This class is used to enable filters.
- filter-none: This class is used to remove filters.
Syntax:
<element class="filter">..</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-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Filter Class</b>
<div class="grid grid-flow-col text-center p-4">
<img class="rounded-lg filter brightness-50" src=
alt="image">
<img class="rounded-lg filter invert" src=
alt="image">
<img class="rounded-lg filter blur-lg" src=
alt="image">
<img class="rounded-lg filter contrast-125" src=
alt="image">
<img class="rounded-lg filter grayscale" src=
alt="image">
</div>
</body>
</html>
|
Output: