<p>可复用 Tailwind 组件需遵循四大原则：①用 @layer components + @apply 封装样式，避免内联 class；②通过 CSS 变量与 theme.extend 实现主题与尺寸动态化；③以 data-* 属性和 slot 驱动状态与内容，解耦 JS 逻辑；④用 @layer utilities 提炼原子操作，确保语义清晰、职责分明。</p>
组件结构必须用 @apply 而非内联 class
直接在 HTML 标签上堆砌 class 会导致样式逻辑散落、难以维护，尤其当同一组样式在多个地方重复出现时。Tailwind 的 @apply 是把一串 utility class 提炼成可复用的 CSS 类名的关键手段。
常见错误是写成：
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Submit</button>——这种写法无法被其他组件继承或定制，改颜色就得全局搜。
- 正确做法是在
@layer components中定义：@layer components {<br> .btn-primary {<br> @apply bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded;<br> }<br>} - 后续只需：
<button class="btn-primary">Submit</button>
- 若需变体（如小号按钮），不要新增 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: {<br> surface: 'var(--color-surface)',<br> accent: 'var(--color-accent)',<br>} - 组件内用
bg-surface、text-accent，再通过 CSS 自定义属性切换主题：:root { --color-surface: #fff; --color-accent: #3b82f6; }<br>.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;}<br>[data-size="sm"] {@apply px-2 py-1 text-sm;} - 配合
<slot>让内容可替换，而非写死标签结构。例如按钮组件只负责容器样式，图标和文字由使用者传入：<button data-state="hover"><slot></slot></button>
- 避免在组件内部写
document.querySelector或监听 click —— 那不是组件职责，是调用方的事
用 @layer utilities 封装高频原子操作，减少重复 @apply
有些样式组合高频出现（比如“居中+弹性”、“截断单行文本”），每次都 @apply flex items-center 或 @apply truncate 很累，也容易漏掉关键声明。
这类原子级能力应该收拢到 @layer utilities，而不是塞进某个具体组件里。
- 例如统一文本截断逻辑：
@layer utilities {<br> .truncate-1 {@apply truncate;}<br> .truncate-2 {@apply line-clamp-2;}<br> .truncate-3 {@apply line-clamp-3;}<br>} - 又如常用布局基元：
.flex-center {@apply flex items-center justify-center;}<br>.grid-cols-auto {@apply grid grid-cols-[repeat(auto-fit,minmax(240px,1fr)))] gap-4;} - 注意：这些 utility 必须语义清晰、行为确定，不能带业务含义（比如
.product-card-header就不该放这里）
组件越复杂，越要警惕“把所有东西都塞进一个 class”的诱惑。可复用性不来自功能堆砌，而来自边界清晰的职责划分和可预测的输入输出。真正难的不是写一堆 class，而是决定哪些该暴露、哪些该封装、哪些该交给父级控制。
