深色卡片应选bg-gray-950+border-gray-800实现微对比，禁用bg-black；阴影用shadow-inner或极淡白边；文字用text-gray-100+font-medium；悬停改用hover:scale-[0.998]；响应式需分层控制圆角与阴影；父容器与卡片色差须≥两级。
深色卡片的背景与边框怎么选才不发灰
直接用 bg-gray-900 + border-gray-800 容易显得沉闷、缺乏层次。Tailwind 的深色系不是越深越好，关键在「微对比」：卡片背景用 bg-gray-950（或 bg-slate-950），边框用略亮一级的 border-gray-800，这样能自然勾勒轮廓而不抢戏。若用 bg-black，反而会因缺乏环境光感显得“死黑”，尤其在 OLED 屏上失真。
常见错误是套用浅色模式思维——比如给深色卡片加 shadow-lg，结果阴影全被吞掉。正确做法是改用 shadow-inner 或极淡的 shadow-[0_0_0_1px_rgba(255,255,255,0.05)] 模拟微妙的内凹光感。
文字可读性差？别只调 color，要动 font-weight 和 tracking
深色背景下，text-white 看似安全，但小字号时易糊成一片。优先用 text-gray-100 或 text-slate-200，再配合 font-medium（不是 font-bold）提升字形清晰度。标题类文字可加 tracking-tight 收紧字距，避免视觉松散。
列表项或说明文字容易踩坑：直接写 text-gray-400 在深底上对比度不足（尤其 WCAG AA 不达标）。换成 text-gray-500 并确保字体大小 ≥ 1rem，或加 leading-relaxed 提升行高缓冲。
立即学习“前端免费学习笔记（深入）”；
悬停动效卡顿？用 will-change + transform 替代 opacity 过渡
深色卡片常配 hover:opacity-95，但 opacity 触发重绘，低端设备易掉帧。更稳的方案是：hover:scale-[0.998] 配合 transition-transform duration-200，再加 will-change: transform 提前声明。这个缩放值必须极小（0.998 而非 0.99），否则肉眼可见抖动。
如果一定要用透明度变化，务必限定作用域：hover:[&>*]:opacity-95 比全局 hover:opacity-95 更可控，避免子元素（如图标、按钮）意外变淡。
响应式断点下阴影和圆角容易崩，得手动覆盖
Tailwind 默认的 rounded-xl 在移动端可能过锐，而 shadow-xl 在小屏上又太重。不要依赖单一 class，用响应式前缀分层控制：
class="rounded-lg sm:rounded-xl md:rounded-2xl
shadow-sm sm:shadow-md md:shadow-lg"
注意：深色模式下 shadow 的 rgba 值需同步调整。例如默认 shadow-lg 是 rgba(0,0,0,0.1)，但在深色背景上应等效为 rgba(255,255,255,0.05)，所以实际推荐手写 shadow-[0_1px_3px_rgba(255,255,255,0.05)] 并响应式覆盖，而不是依赖预设。
最常被忽略的是父容器的背景——如果卡片外层是 bg-gray-900，而卡片本身是 bg-gray-950，两者色差太小，卡片就“浮”不起来。务必检查卡片与直接父级的色阶差至少两级（如 gray-900 → gray-950，或 slate-900 → slate-950），否则所有细节优化都白搭。
