tailwind css 内置 shadow- 原子类（如 shadow-md、shadow-lg），无需额外引入库；需确保正确配置并运行构建流程，自定义阴影须在 tailwind.config.js 的 theme.extend.boxshadow 中添加合法 box-shadow 字符串。
如何在项目中直接用 Tailwind CSS 的 shadow 原子类
不需要额外引入阴影库，Tailwind 本身已内置完整的 shadow- 原子类体系，直接写 shadow-md、shadow-lg 就能生效。
前提是你的项目已正确配置 Tailwind（包括 tailwind.config.js 中启用了 boxShadow 插件，默认开启）。常见错误是只引入了 CSS 文件但没运行构建流程，导致类名不生成——这时浏览器里查不到 box-shadow 样式。
- 开发时务必确认
tailwindcss已通过 PostCSS 或 Vite/Vue/React 插件注入，纯 CDN 引入不支持自定义原子类 -
shadow-none、shadow-sm、shadow、shadow-md、shadow-lg、shadow-xl、shadow-2xl是默认提供的七档 - 深色模式下若需不同阴影，可配合
dark:shadow-lg使用，但注意部分旧版 Tailwind 需手动启用darkMode: 'class'
自定义 shadow 值必须改 tailwind.config.js
想用 shadow-card 或 shadow-floating 这类语义化类名？不能靠 HTML 里硬写，必须在配置中扩展 theme.boxShadow。
直接在 tailwind.config.js 的 theme.extend.boxShadow 下添加键值对，值必须是合法 CSS box-shadow 字符串（含单位、颜色、偏移等），否则编译会静默忽略。
- 错误写法：
card: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'—— 缺少0水平偏移前的空格，实际应为'0 4px 6px -1px rgba(0, 0, 0, 0.1)' - 推荐用
rgba()而非hsl()或命名色，避免 Safari 旧版本解析失败 - 新增类名后需重启开发服务器（如
npm run dev），热更新通常不触发 Tailwind 重新生成 CSS
为什么加了 shadow 类却没效果
最常被忽略的是元素没有「渲染层」：box-shadow 在父容器 overflow: hidden 或自身 transform: scale(1) 等触发层叠上下文的情况下，可能被裁剪或丢失。
另一个高频原因是元素背景透明且无内容高度——比如空 div 加了 shadow-lg，但没设 height 或 padding，阴影自然不可见。
- 检查 computed styles 中是否真有
box-shadow属性，排除类名拼写错误（如把shadow-md写成shodow-md） - 用浏览器 DevTools 的 “Rendering” 面板勾选 “Paint flashing”，看阴影区域是否被绘制
- 避免在
position: absolute元素上依赖父容器 padding 来“撑开”阴影显示空间，应显式设置inset或top/left
要不要用第三方阴影库（如 shadows.css）
没必要。这类库本质只是预设一堆 .shadow-1～.shadow-20 的 class，和 Tailwind 的 shadow- 体系功能重叠，反而增加 bundle 体积、破坏原子类一致性。
唯一例外是需要极细粒度控制（如逐像素调节模糊半径 + 动态 color stop），但此时更应考虑用 CSS 自定义属性 + JS 控制，而非引入整套阴影库。
- 第三方库的 class 名无法和 Tailwind 的响应式前缀（如
md:shadow-xl）共存 - 它们通常不处理深色模式、高对比度访问模式（
@media (prefers-contrast: high)）等现代需求 - 若团队已用 Tailwind，强行混入另一套 shadow 命名，后续维护成本远高于配置几个自定义值
阴影不是独立设计系统，它是盒模型的一部分——把它当成 border 或 background 一样管理，逻辑才不会散掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
