tailwind 的 shadow 配置项映射 box-shadow，预设类不支持多层、内阴影或响应式；需通过扩展 theme.boxshadow 自定义值（如 card-lg），并手动配置响应式与状态类（hover:shadow-card-lg），注意空格转义、单位强制、z-index/overflow/暗色模式适配。
shadow配置项在Tailwind中实际是box-shadow的映射
Tailwind 的 shadow- 工具类（如 shadow-md、shadow-xl）本质是预设的 box-shadow 值，不支持运行时动态计算或响应式阴影强度。所谓“复杂卡片阴影”，通常指多层阴影（box-shadow: a b c d color, e f g h color）、内阴影（inset）或随状态变化的阴影（hover/focus），这些无法靠默认 shadow- 类直接实现。
真正可控的方式是：绕过预设类，用 shadow 自定义值 + !important 覆盖（不推荐），或更稳妥地——扩展 theme.boxShadow 配置。
在tailwind.config.js中扩展自定义shadow值
修改 tailwind.config.js 的 theme.extend.boxShadow，可添加任意命名的阴影值，后续直接用 shadow-[name] 调用。注意：值必须是合法的 box-shadow 字符串，且不能含空格（Tailwind 会把空格转义为下划线）。
- 多层阴影写法：用英文逗号分隔，每层之间用空格分隔偏移/模糊/扩散/颜色，例如
"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" - 内阴影必须显式写
inset，如"inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)" - 避免使用单位缩写（如
px不可省略），否则构建时报错Invalid boxShadow value - 若需响应式，得手动配
variants: ['responsive']并在类名前加断点，如md:shadow-card-lg
示例配置：
module.exports = {
theme: {
extend: {
boxShadow: {
'card-sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
'card-lg': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'card-inset': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)',
}
}
}
}
hover/focus等状态下的阴影切换要靠组合类
Tailwind 不允许在 shadow- 类里嵌套伪类，所以不能写 shadow-md hover:shadow-lg 这种“自动过渡”。必须显式写出状态类，并确保对应状态存在阴影定义。
- 基础态用
shadow-card-sm，悬停态用hover:shadow-card-lg，两者都需在配置中定义 - 若需平滑过渡，必须额外加
transition-shadow（需启用transitionProperty扩展） - 注意：
focus-within或group-hover等复合状态，阴影类必须作用于同一元素或其父级group容器，否则不生效 - 不要依赖
shadow-none清除阴影——它只是设为box-shadow: none，而自定义阴影类可能带inset，清除时需明确匹配
调试阴影时容易忽略的三个细节
阴影效果常因视觉干扰被误判，实际问题往往出在层级或渲染行为上：
-
z-index值太低：卡片被其他元素遮挡，阴影不可见；确保卡片有足够z-10或更高 - 父容器
overflow: hidden：裁剪掉阴影区域，尤其多层阴影或大扩散值时；检查最近的父级是否有该样式 - 颜色透明度与背景冲突：比如
rgba(0,0,0,0.1)在深色背景上几乎不可见，建议用devtools直接编辑box-shadow值实时验证
复杂阴影不是堆参数，而是根据光照逻辑选偏移方向、模糊半径和透明度比例。最常被跳过的一步：在真实设备上测暗色模式下的阴影可见性——prefers-color-scheme: dark 下，同一 rgba 值表现可能完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
