shadow-2xl 默认对应 box-shadow: 0 24px 64px -16px rgba(0,0,0,0.24)，含16px模糊半径与-16px负偏移，营造视觉“扩展”凸起感；v3.0+原生支持，v2.x需手动配置。
shadow-2xl 的实际阴影尺寸是多少
它不是「扩展」阴影，而是 Tailwind 预设的第 5 档阴影强度（shadow-sm → shadow → shadow-md → shadow-lg → shadow-xl → shadow-2xl），对应 box-shadow 的 16px 模糊半径 + 24px 偏移（具体值取决于 Tailwind 版本，默认配置中 shadow-2xl 是 0 24px 64px -16px rgba(0,0,0,0.24)）。所谓「扩展」是视觉错觉——模糊范围大、颜色浅、带负向偏移，让阴影看起来向外「撑开」了元素边界。
- 负偏移（如
-16px）是关键：它把阴影往内收一点，反而强化了主体的「凸起感」，让人误以为阴影向外延展 - 不是所有主题都启用
shadow-2xl：旧版 Tailwind（v2.x）默认只到shadow-xl，需手动在theme.boxShadow中扩展 - 移动端下过大的模糊值会导致渲染变慢，尤其在低端 Android WebView 中
如何自定义 shadow-2xl 的「扩展效果」
直接覆盖默认值最可靠，避免依赖插件或魔改配置。在 tailwind.config.js 的 theme.extend.boxShadow 中添加：
module.exports = {
theme: {
extend: {
boxShadow: {
'2xl': '0 32px 96px -24px rgba(0,0,0,0.32)'
}
}
}
}
-
96px模糊值比默认更大 → 更强的弥散感，视觉上更「膨胀」 -
-24px负偏移比默认更深 → 进一步压住阴影边缘，突出主体轮廓 - 别用
inset：那是内阴影，和「扩展」完全相反 - 改完必须重启 dev server，HMR 不会热更
boxShadow配置
为什么加了 shadow-2xl 没效果
常见原因不是类名写错，而是被其他样式覆盖或缺失前提条件：
- 父容器设置了
overflow: hidden：阴影被裁掉，检查祖先元素的overflow值 - 元素本身没有「高度」或「背景色」：阴影依附于元素盒模型，透明无内容的
div可能看不见效果 - 用了
backdrop-filter或transform：某些浏览器（尤其是 Safari）对组合效果渲染异常，可临时加will-change: transform尝试修复 - Tailwind 版本太低：
shadow-2xl是 v3.0+ 原生支持，v2.x 需手动配，否则类名不生成 CSS
替代方案：不用 shadow-2xl 也能模拟扩展阴影
当需要更精细控制（比如单侧扩展、渐变阴影、响应式变化），纯 CSS 多层 box-shadow 更灵活：
立即学习“前端免费学习笔记（深入）”；
.expanded-shadow {
box-shadow:
0 16px 32px -12px rgba(0,0,0,0.16),
0 32px 64px -24px rgba(0,0,0,0.24),
0 64px 128px -32px rgba(0,0,0,0.16);
}
- 三层叠加：近层锐利、中层主扩展、远层柔和，比单层
shadow-2xl更有层次 - 每层独立调参：可以单独给某一层加
x偏移，实现「向右扩展」等定向效果 - 无法用
@apply简洁复用：多层box-shadow值太长，建议抽成 CSS 类而非 Tailwind@layer - 注意性能：超过 4 层阴影在滚动时可能触发重绘卡顿
overflow: hidden。 
