如何使用Tailwind CSS编写高度可复用的UI组件

<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，而是决定哪些该暴露、哪些该封装、哪些该交给父级控制。