直接用bg-white、rounded-xl、shadow-sm、p-5可搭建可用卡片，但需加overflow-hidden防内容溢出，shadow-sm更适配深色主题，hover效果须配transition-shadow或transition-transform，移动端应改用active:scale-95替代hover。
直接用 bg-white、rounded-xl、shadow-sm、p-5 这几个类就能搭出可用的卡片，不需要写自定义 CSS。
基础卡片结构怎么写才不踩坑
很多人一上来就套 rounded-lg + shadow-md，结果在深色背景上阴影发灰、圆角被裁掉。关键不是“堆类名”，而是分层控制：
-
overflow-hidden必须加在最外层容器上，否则图片或长文本会撑破圆角 -
shadow-sm比shadow-md更安全——后者在暗色主题下容易过重，且移动端渲染负担略高 - 内边距优先用
p-5而不是py-4 px-6，减少类名数量，也避免垂直/水平间距不一致 - 标题和正文别靠 class 区分语义，直接用
text-lg font-semibold text-gray-900和text-gray-600 leading-relaxed，省去额外 wrapper
hover 效果为什么没反应
hover:shadow-lg 或 hover:translate-y-[-4px] 写了却不动，90% 是因为缺了过渡声明或被裁剪：
- 必须配
transition-shadow或transition-transform，只写hover:类不会自动触发动画 - 如果卡片父容器有
overflow-hidden（比如带圆角的 grid item），translate-y位移部分会被直接切掉——此时改用hover:-mt-1更可靠 - 移动端真机上 hover 不生效是正常行为，别指望它触发；需要点击反馈请用
active:scale-95或 JS 控制data-active状态
响应式网格布局怎么选 flex 还是 grid
用 grid-cols-*，别用 flex flex-wrap 做多列卡片：
立即学习“前端免费学习笔记（深入）”；
-
grid能保证每行严格对齐，哪怕某张卡片内容高度不同也不会错位 - 推荐写法：
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6，断点清晰，无需 media query - 如果卡片里有绝对定位元素（比如左上角“新品”标签），记得给卡片加
relative，否则absolute会相对于 body 定位 - 不要给整个 grid 容器加
transition-all，它会强制重绘所有子项，滚动时可能卡顿
翻转卡片为什么转一半就卡住
Tailwind 默认不支持 3D 翻转，hover:rotate-y-180 只是平面旋转，要真深度必须补三个原生属性：
-
perspective-1000必须加在**翻转盒子的父容器**上，写在翻转盒子自身上无效 - 翻转盒子自己要加
preserve-3d（需手动在@layer utilities里定义）和relative - 正反两面都要加
backface-hidden，否则背面内容会透过来，视觉混乱 - 别用
transition-all，只写transition-transform duration-500，否则 perspective 变化会干扰动画节奏
真正麻烦的不是写类名，而是记住哪些属性 Tailwind 不提供、哪些容器层级不能错——比如 perspective 必须挂父级，preserve-3d 必须手动加，overflow-hidden 会吃掉 translate。这些细节漏一个，效果就断在半路。
