滤镜在实际开发中非常好用，通过 CSS 滤镜，我们不需要借助 Photoshop 等图片处理软件，就可以轻松地实现各种视觉效果。
Tailwind CSS 滤镜语法
在 Tailwind CSS 中，我们可以使用 filter 属性相关的类名来定义为一张图片或一个元素添加滤镜效果。
语法：
滤镜名
滤镜名-{尺寸/数值}说明：
其中，常用的滤镜类名如下表所示。
| 类名 | 对应 CSS | 说明 |
|---|---|---|
| blur-sm | filter: blur(4px); | 小模糊 |
| blur-md | filter: blur(12px); | 中等模糊 |
| grayscale | filter: grayscale(100%); | 完全变灰（黑白照片） |
| brightness-50 | filter: brightness(0.5); | 亮度减半（变暗） |
| brightness-110 | filter: brightness(1.1); | 亮度增加 10% |
| sepia | filter: sepia(100%); | 泛黄（复古照片） |
Tailwind CSS 滤镜示例
接下来，我们通过几个简单的例子来讲解一下如何使用 Tailwind CSS 来定义元素的滤镜效果。
示例 1：使用滤镜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<img src="imgs/bird.jpg" class="rounded-lg">
<img src="imgs/bird.jpg" class="rounded-lg grayscale mt-4">
<img src="imgs/bird.jpg" class="rounded-lg blur-sm mt-4">
</body>
</html>页面效果如下图所示。
分析：
更多关于滤镜的使用，小伙伴们可以查看：CSS filter 属性。
示例 2：hover 滤镜交互
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10 flex space-x-6">
<img
src="imgs/bird.jpg"
class="w-48 h-48 object-cover rounded-xl grayscale hover:grayscale-0 transition-all duration-300 cursor-pointer shadow-md"
>
<img
src="imgs/bird.jpg"
class="w-48 h-48 object-cover rounded-xl blur-sm brightness-75 hover:blur-none hover:brightness-100 transition-all duration-300 cursor-pointer shadow-md"
>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 hover:grayscale-0 和 hover:blur-none。当鼠标放上去时，Tailwind CSS 会将这些滤镜效果取消掉，配合我们后面会学到的 transition-all（平滑过渡），就能实现非常丝滑的视觉动效。
