17370845950

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 更可控，尤其在不同屏幕宽度下要保持列数一致时：

  ...
  ...
  

• 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" 到 标签上
• 标签类元素（如 “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，那会失去颜色控制和响应式缩放能力。