Tailwind CSS 定义阴影
在 Tailwind CSS 中，我们可以使用 “shadow-*” 相关类名来定义阴影效果（相当于传统 CSS 中的 box-shadow）。
语法：
shadow-{尺寸}说明：
阴影相关的类名如下表所示。其中，随着尺寸的增大，阴影会变得越来越扩散。
| 类名 | 说明 |
|---|---|
| shadow-sm | 2px 阴影 |
| shadow | 3px 阴影 |
| shadow-md | 6px 阴影 |
| shadow-lg | 15px 阴影 |
| shadow-xl | 25px 阴影 |
| shadow-2xl | 50px 阴影 |
| shadow-none（默认） | 去除阴影 |
| shadow-inner | 内阴影 |
示例 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">
<div class="w-32 h-32 bg-white rounded-lg shadow-sm"></div>
<div class="w-32 h-32 bg-white rounded-lg shadow-md mt-4"></div>
<div class="w-32 h-32 bg-white rounded-lg shadow-2xl mt-4"></div>
</body>
</html>页面效果如下图所示。
分析：
从结果可以看出，随着 shadow 后缀的改变，三个白色方块的 “阴影高度” 是完全不同的。
示例 2：内阴影
<!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-4">
<div class="w-48 h-24 shadow-xl shadow-blue-500/40"></div>
<div class="w-48 h-24 shadow-inner shadow-blue-500/40 mt-4"></div>
</body>
</html>页面效果如下图所示。
分析：
shadow-inner 表示将阴影定义为 “内阴影” 效果。
Tailwind CSS 彩色阴影
在传统网页设计中，阴影通常是死板的黑色。但现代设计风格更倾向于使用 “彩色阴影”，即阴影的颜色与元素本身的色调保持一致，这样可以让页面显得通透和高级。
语法：
shadow-{颜色}-{色阶}说明：
“颜色” 是颜色的英文名，比如 red（红）、blue（蓝）、green（绿）、gray（灰）等。
“色阶” 取值范围通常是 50~950。值越小，颜色越浅；值越大，颜色越深。一般来说，500 是最标准的基础色。
示例 3：品牌色阴影
<!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">
<button class="px-4 py-2 bg-[#19b694] text-white rounded shadow-lg shadow-[#19b694]/40 cursor-pointer">
提交按钮
</button>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，shadow-[#19b694]/40 中的 “/40” 代表阴影的透明度为 40%。小伙伴们可以发现，当按钮拥有了同色系的绿色阴影后，像是散发着微光一样。这种 “呼吸感” 是提升网站 UI 质感非常有用的一个技巧。
常见问题
1. 为什么我给元素加上了 shadow-lg，却没有任何效果呢？
阴影的本质是比周围颜色更深的投影。如果你当前的背景色是纯黑色的，或者背景色与阴影颜色非常接近，此时阴影自然就会被 “吞噬” 掉。
