Lớp filter được dùng để thiết lập hiệu ứng hình ảnh cho một phần tử. Lớp này thường được dùng cho nội dung hình ảnh. Trong CSS, ta dùng CSS filter property. Tailwind CSS đã thêm tính năng filter mới trong phiên bản 2.1.
Các lớp Filter:
- filter: Lớp này dùng để kích hoạt các bộ lọc.
- filter-none: Lớp này dùng để loại bỏ các bộ lọc.
Cú pháp:
<element class="filter">..</element>
Ví dụ:
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=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
<img class="rounded-lg filter invert"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
<img class="rounded-lg filter blur-lg"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
<img class="rounded-lg filter contrast-125"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
<img class="rounded-lg filter grayscale"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
alt="image">
</div>
</body>
</html>
Đầu ra:
