tailwind 默认不支持 reflect，需用 ::after 伪元素 + scaley(-1) 实现倒影；自定义工具类须在 @layer utilities 中定义，并手动添加 mask-image 渐隐效果。
Tailwind 默认不支持 reflect，别白费劲找现成类
浏览器早已废弃 -webkit-box-reflect（也就是常说的 reflect），现代 CSS 根本没有标准 reflect 属性。你在文档或旧教程里看到的 reflect-{direction}-{length} 类，基本都来自第三方插件或手写 @layer utilities，Tailwind 官方从未内置。直接在配置里搜 reflect 或尝试 class="reflect-bottom"，只会得到无样式结果。
用 after 伪元素 + scaleY(-1) 实现可靠倒影
这是目前最可控、兼容性好（Chrome/Firefox/Safari 均支持）、且能配合 Tailwind 工作流的方式。核心思路是：用 ::after 复制内容，垂直翻转，再偏移到底部对齐。
实操建议：
- 目标元素需设
relative，否则absolute的伪元素会脱离预期位置 - 倒影本身用
absolute+top/bottom控制起始位置，transform: scaleY(-1)翻转，再用translateY()微调重叠间隙 - 为避免倒影遮挡原图，记得给原图加
z-index，倒影设更低值 - 透明度、模糊、渐变遮罩等效果必须手动加到伪元素上，Tailwind 的
opacity-、blur-、bg-gradient-to-都可直接用
.reflected {
position: relative;
}
.reflected::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: inherit;
transform: scaleY(-1);
transform-origin: top;
opacity: 0.2;
filter: blur(1px);
z-index: -1;
}
在 tailwind.config.js 里注册自定义 reflect 工具类
想用类似 reflect-bottom-20 opacity-15 blur-xs 这种写法？可以，但得自己定义 @layer utilities，不能依赖默认配置。
关键点：
- 必须在
content配置中包含你写自定义类的文件路径，否则 JIT 模式下不会生成对应 CSS -
reflect-bottom-N中的N建议映射为top: calc(100% + Npx)，而不是固定高度，更符合“倒影在下方”的直觉 - 不要试图把
transform: scaleY(-1)拆成独立工具类——它和定位强耦合，单独抽离反而难维护 - 如果项目用的是 CSS-in-JS 或需要响应式倒影（比如移动端关闭），建议封装成 React 组件而非纯工具类
// tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}", "./reflections.css"],
theme: {
extend: {
// 可选：扩展 spacing 以匹配 reflect 类的数值
spacing: {
20: "5rem",
},
},
},
plugins: [],
}
<!-- reflections.css -->
@layer utilities {
.reflect-bottom-20::after {
@apply absolute top-[calc(100%+5rem)] left-0 w-full h-full bg-inherit transform scale-y-[-1] origin-top opacity-20 blur-xs z-[-1];
}
}
倒影边缘渐隐要用 mask-image，不是 background
单纯靠 bg-gradient-to-t 叠在倒影上，只能盖住顶部一部分，无法实现“从清晰到透明”的自然衰减。真正生效的是 mask-image，而且必须作用于倒影伪元素本身。
注意细节：
-
mask-image: linear-gradient(to top, transparent 0%, black 40%)—— 方向必须是to top，因为倒影已被scaleY(-1)翻转，物理顶部实际是倒影的底部 - Tailwind 没有
mask-工具类，得手写；若用mask-border或mask-size，同样要进@layer utilities - Firefox 对
mask-image支持良好，但旧 Safari 需加-webkit-mask-image前缀（JIT 不自动补，得手动写） - 别用
opacity模拟渐隐——它会让整个倒影均匀变淡，失去“底部消失”的纵深感
复杂点在于：倒影的翻转、定位、模糊、渐隐、响应式缩放，全部耦合在一起。少一个环节，视觉就断层。动手前先想清楚哪几层必须同步改，比堆 class 更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
