Tailwind原子类可高效构建卡片：容器用bg-white+rounded-xl+shadow-sm，内边距用p-5+flex flex-col gap-4，标题/正文语义化配色，交互态需配置variants，网格用grid-cols-*，图标用SVG组件或inline SVG。
直接用 Tailwind 的原子类组合卡片结构
不用写一行自定义 CSS，Tailwind 提供的 bg-white、rounded-lg、shadow-md、p-6 这类类名已经覆盖卡片最常用视觉层。关键不是“找现成组件”，而是按语义分层组合：
-
容器层：用bg-white+rounded-xl+shadow-sm（避免shadow-lg在深色背景上过重） -
内边距与流式布局：优先用p-5而非py-4 px-5，减少类名数量；配合flex flex-col gap-4替代手动mb-3 -
标题/内容区分：标题用text-lg font-semibold text-gray-900，正文用text-gray-600 leading-relaxed，不依赖额外 class 控制行高
卡片悬停和交互状态别硬编码 hover:xxx
Tailwind 默认只在 :hover 时启用交互类，但很多卡片需要点击反馈或禁用态。必须提前在 tailwind.config.js 的 variants 中确认是否启用了 hover、focus、disabled 等变体——否则写了 hover:shadow-lg 也不生效。
- 常见漏配：
disabled:opacity-50需要显式加入variants: { extend: { opacity: ['disabled'] } } - 移动端悬停无效：用
group+group-hover:替代直接hover:，尤其当卡片内含按钮时 - 性能注意：避免对整个卡片加
transition-all duration-300，只过渡shadow和transform即可
响应式卡片网格用 grid-cols-* 而非 flex-wrap
用 grid 实现多列卡片比 flex 更可控，尤其在不同屏幕宽度下要保持列数一致时：
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> <div class="bg-white rounded-xl shadow-sm p-5">...</div> <div class="bg-white rounded-xl shadow-sm p-5">...</div> <!-- 更多卡片 --> </div>
-
gap-6比在每个卡片上加mb-6更可靠，不会因最后一行错位 - 避免用
md:flex md:flex-wrap模拟网格，容易在子元素高度不一时出现空白断层 - 如果卡片高度需统一，加
grid-rows-1或用min-h-[200px]显式约束，不要依赖flex的align-items
图标、头像、标签等装饰元素用插件或 inline SVG
Tailwind 本身不提供图标类，强行用 text-2xl text-blue-500 堆颜色字体图标会丢失语义和缩放控制。推荐两种轻量方案：
立即学习“前端免费学习笔记（深入）”；
- 用
@heroicons/react或lucide-react导入 SVG 组件，配合h-5 w-5统一尺寸 - 纯静态页面可用 inline SVG，直接加
class="h-5 w-5 text-gray-400"到<svg>标签上 - 标签类元素（如 “New” badge）用
inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800，注意px-2.5是 Tailwind 内置的 0.625rem，比px-2更贴合文字宽度
别为了省几行代码把 SVG 写成 background-image，那会失去颜色控制和响应式缩放能力。
