如何用Tailwind CSS编写可复用UI组件

先说说几个核心判断：可复用 Tailwind 组件的关键，其实就四个字——边界清晰。具体来说，有四大原则值得关注：利用 @layer components 配合 @apply 封装样式，避免内联 class 散落各处；通过 CSS 变量与 theme.extend 实现主题与尺寸的动态化；借助 data-* 属性和 slot 驱动状态与内容，让 JS 逻辑与样式解耦；使用 @layer utilities 提炼原子操作，确保语义清晰、职责分明。掌握这些 Tailwind 组件封装技巧，能显著提升 UI 开发效率与代码复用性。

组件结构必须用 @apply 而非内联 class

很多开发者容易犯的一个错误，是直接在 HTML 标签上堆砌 class，就像这样：

Submit

更推荐的做法是使用 @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;
    }
  }

• 后续只需：

  Submit

• 若需要变体（如小号按钮），不要新增 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，而是决定哪些该暴露、哪些该封装、哪些该交给父级控制——这恰恰是经验积累出来的设计智慧。