先说说几个核心判断：可复用 Tailwind 组件的关键，其实就四个字——边界清晰。具体来说，有四大原则值得关注：利用 @layer components 配合 @apply 封装样式，避免内联 class 散落各处；通过 CSS 变量与 theme.extend 实现主题与尺寸的动态化；借助 data-* 属性和 slot 驱动状态与内容，让 JS 逻辑与样式解耦；使用 @layer utilities 提炼原子操作，确保语义清晰、职责分明。掌握这些 Tailwind 组件封装技巧，能显著提升 UI 开发效率与代码复用性。
组件结构必须用 @apply 而非内联 class
很多开发者容易犯的一个错误，是直接在 HTML 标签上堆砌 class，就像这样：
更推荐的做法是使用 @apply 在 @layer components 中定义组件类，将一串 utility class 提炼成可复用的 CSS 类名，这也是 Tailwind 组件设计的核心思路：
- 正确做法：
@layer components {
.btn-primary {
@apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded;
}
} - 后续只需：
- 若需要变体（如小号按钮），不要新增 class，而是扩展原有定义：
.btn-primary.sm {@apply px-3 py-1 text-sm;}
用插值变量控制主题色与尺寸，避免硬编码
Tailwind 默认的 theme 配置是静态的，但组件真正可复用的前提，是能够灵活适应不同主题或设计系统。硬写 bg-blue-500 或 text-lg 会卡死后续的扩展路径。比如一个卡片组件，如果只支持 bg-white 和 shadow-md，换到深色模式就只能重写——这显然不是可复用的设计思路。
解决方案是：
- 在
tailwind.config.js的theme.extend.colors和theme.extend.spacing中预留语义化 token：colors: {
surface: 'var(--color-surface)',
accent: 'var(--color-accent)',
} - 组件内使用
bg-surface、text-accent，再通过 CSS 自定义属性切换主题：:root { --color-surface: #fff; --color-accent: #3b82f6; }
.dark { --color-surface: #1f2937; --color-accent: #60a5fa; } - 尺寸同理：用
h-[--size-height]+style="--size-height: 48px;"替代固定的h-12
用 slot + data-* 属性暴露交互钩子，别依赖 JS 操作 class
不少人习惯用 JS 动态添加 active、disabled 这类 class，结果导致组件和业务逻辑强耦合，测试困难，也违背了 Tailwind “样式即 API” 的设计理念。真正可复用的组件，应该依靠 HTML 结构和属性来驱动样式变化，这也是前端组件化的最佳实践。
- 给组件根元素添加
data-state="active"或data-size="sm"，然后在 CSS 中用属性选择器响应：[data-state="active"] {@apply bg-blue-600;}
[data-size="sm"] {@apply px-2 py-1 text-sm;} - 配合
- 避免在组件内部写
document.querySelector或监听 click —— 那不是组件该管的职责，是调用方的事
用 @layer utilities 封装高频原子操作，减少重复 @apply
有些样式组合出现的频率非常高，比如“居中+弹性”、“截断单行文本”等，每次都写 @apply flex items-center 或 @apply truncate 很繁琐，也容易漏掉关键声明。这类原子级能力应该收拢到 @layer utilities 中，而不是塞进某个具体组件里，这样能大幅提升 Tailwind 组件复用效率。
- 例如统一文本截断逻辑：
@layer utilities {
.truncate-1 {@apply truncate;}
.truncate-2 {@apply line-clamp-2;}
.truncate-3 {@apply line-clamp-3;}
} - 又如常用布局基元：
.flex-center {@apply flex items-center justify-center;}
.grid-cols-auto {@apply grid grid-cols-[repeat(auto-fit,minmax(240px,1fr)))] gap-4;} - 注意：这些 utility 必须语义清晰、行为确定，不能带有业务含义（比如
.product-card-header就不该放这里）
组件越复杂，越要警惕把所有东西都塞进一个 class 的诱惑。可复用性并不来自功能堆砌，而是来自边界清晰的职责划分和可预测的输入输出。真正难的不是写一堆 class，而是决定哪些该暴露、哪些该封装、哪些该交给父级控制——这恰恰是经验积累出来的设计智慧。
