应使用@layer components在入口CSS中定义组件类，配合CSS变量实现主题适配，用tailwind-variants管理变体，响应式布局优先采用Grid断点类而非JS或媒体查询。
直接用 @layer components 封装，别在 <style> 里写 @apply
Tailwind 的 JIT 引擎只扫描 content 配置中声明的文件（如 src/**/*.{js,ts,vue}），而单文件组件里的 <style scoped> 是运行时注入的字符串，根本不会被解析。你在 Vue/React 组件的 <style> 块里写：.card {@apply rounded-lg shadow-md p-6;}，构建后大概率直接消失。
正确位置是项目入口 CSS 文件（比如 src/styles/tailwind.css）中，且必须包裹在 @layer components 里：
@layer components {
.card {
@apply rounded-lg shadow-md p-6 bg-white overflow-hidden transition-shadow;
}
.card:hover {
@apply shadow-xl;
}
}不加 @layer components，PurgeCSS 构建阶段会把这类类名当“未使用”清掉；加了，才能确保它被识别为“需保留的组件类”。
用 CSS 变量控制主题和尺寸，别硬写 bg-blue-500 或 h-12
硬编码颜色、间距、圆角值会让卡片无法适配深色模式或设计系统变更。比如写死 bg-white 和 text-gray-800，换暗色主题就得全局改 HTML 或加 class 切换逻辑。
立即学习“前端免费学习笔记（深入）”；
推荐做法是在 tailwind.config.js 的 theme.extend 中预留语义化 token：
module.exports = {
theme: {
extend: {
colors: {
cardBg: 'var(--card-bg)',
cardText: 'var(--card-text)',
},
spacing: {
cardPadding: 'var(--card-padding)',
}
}
}
}然后在组件类里用这些语义名：
@layer components {
.card {
@apply bg-cardBg text-cardText p-cardPadding;
}
}再通过 CSS 自定义属性切换主题：
:root {
--card-bg: #ffffff;
--card-text: #1f2937;
--card-padding: 1.5rem;
}
.dark {
--card-bg: #1f2937;
--card-text: #f9fafb;
}需要变体（size/variant/state）时，别堆 class，改用 tailwind-variants
纯 @apply 无法动态组合条件：你没法写出 .card.size-sm.variant-outline 这种嵌套变体，更没法让 disabled 状态自动叠加 opacity-50 cursor-not-allowed。
这时 tailwind-variants 是更贴近真实开发节奏的选择。比如一个带尺寸、主题、禁用态的产品卡片：
import { tv } from 'tailwind-variants';
<p>export const card = tv({
base: 'rounded-lg overflow-hidden transition-all',
variants: {
variant: {
default: 'bg-white shadow-sm',
elevated: 'bg-white shadow-md hover:shadow-lg',
outline: 'ring-1 ring-inset ring-gray-200',
},
size: {
sm: 'text-sm',
md: 'text-base',
lg: 'text-lg',
},
disabled: {
true: 'opacity-60 pointer-events-none',
},
},
defaultVariants: {
variant: 'elevated',
size: 'md',
},
});使用时只需：<div class="{card({ variant: 'outline', size: 'sm' })}">。它生成的是原子类字符串，不依赖运行时样式注入，也兼容 SSR 和静态生成。
响应式布局交给 Grid，别靠 JS 或媒体查询手动切
卡片容器的列数变化，完全没必要自己写媒体查询或监听 window.resize。Tailwind 的断点前缀 + grid 工具类就是为此设计的。
常见错误是写成：flex flex-wrap + 手动算 flex-basis，或者用 JS 根据屏幕宽度动态加 class。既冗余又难维护。
正确写法是用 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6：
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> <div class="card">...</div> <div class="card">...</div> <!-- 更多 --> </div>
gap 会自动适配断点（sm:gap-4、lg:gap-6 也可单独控制），grid-cols-* 在对应视口生效，JIT 会按需生成对应规则——没有多余 CSS，也不用担心漏掉某个断点。
真正容易被忽略的是：卡片内部的响应式控制（比如标题字号、图片比例）也要用断点类，而不是只靠容器 Grid。否则小屏下文字挤成一团，大屏下留白失控——这比布局本身更常成为交付翻车点。
