Tailwind CSS 最佳实践 & 设计系统模式 🎨

Source: Dev.to

为什么在设计系统中使用 Tailwind？

Tailwind 开箱即提供间距、排版和颜色等设计令牌。这使它非常适合创建一致且可扩展的设计系统。然而，如果没有合适的模式，你最终会得到难以维护的“类汤”。

必备最佳实践

1. 集中管理设计令牌

不要在代码库中到处散布颜色和间距值。只需在 tailwind.config.js 中定义一次：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      },
    },
  },
};

现在每个人都使用 bg-brand-500 而不是随意的十六进制代码。单一真相来源可以防止整个应用出现不一致。

2. 将模式抽取为组件

别在各处重复相同的 20 个类。创建可复用的组件：

// Bad – repeated everywhere
<button className="px-4 py-2 bg-blue-500 text-white rounded">
  Click me
</button>

// Good – component abstraction
function Button({ children, variant = 'primary' }) {
  return (
    <button className={`btn-${variant}`}>
      {children}
    </button>
  );
}

这是防止代码重复的第一道防线。抽取组件后再考虑使用 @apply。

3. 谨慎使用 @apply

@apply 指令可以把重复的实用类提取到 CSS 类中。仅在真正无法组件化的可复用模式时使用：

/* styles.css */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition;
}

Tailwind 团队建议先进行组件抽象，再考虑 @apply。
了解更多关于 @apply

4. 保持类顺序一致

采用统一的实用类顺序以提升可读性：

1. 布局（flex、grid、block）
2. 定位（absolute、relative）
3. 盒模型（width、height、padding、margin）
4. 排版（font、text）
5. 可视（background、border、shadow）
6. 交互（hover、focus、transition）

<!-- Organized classes -->
<div class="flex items-center justify-center p-4 bg-gray-100 rounded">
  <!-- content -->
</div>

更好的做法是使用官方的 Prettier 插件来自动化：

npm install -D prettier prettier-plugin-tailwindcss

5. 构建基于插件的系统

对于大型团队，可以把实用类拆分为专注的插件：

// tailwind.config.js
const marketingPlugin = require('./tailwind/marketing-plugin');
const dashboardPlugin = require('./tailwind/dashboard-plugin');

module.exports = {
  plugins: [marketingPlugin, dashboardPlugin],
};

每个插件服务于特定领域，使系统保持模块化和可维护。

6. 利用容器查询

使用 Tailwind 的容器查询，实现真正响应式的组件——它们根据父容器而非视口进行适配：

<!-- Example container query usage -->
<div class="container">
  <div class="c-[width>400px]:grid-cols-2">
    <!-- content -->
  </div>
</div>

7. 使用 CSS 变量进行主题化

对于多主题（浅色/深色、品牌变体）支持，结合 CSS 变量与 Tailwind：

@layer theme {
  :root {
    --color-primary: 59 130 246;
  }

  .dark {
    --color-primary: 147 197 253;
  }
}

这样即可在不复制组件的情况下实现上下文感知的主题切换。

8. 正确配置 PurgeCSS

通过正确配置内容路径，让生产环境的 CSS 保持精简：

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './src/**/*.stories.{js,jsx,ts,tsx}',
  ],
};

在 JIT 模式（默认开启）下，构建速度快且 CSS 体积小。

常见陷阱及规避方法

设计系统集成

Tailwind 与设计系统的结合非常出色：

• Figma 变量 – 将 Tailwind 令牌映射到 Figma 变量，实现设计‑开发一致性。
• 组件文档 – 为每个模式编写使用指南。
• Storybook 集成 – 在 Storybook 中展示所有 Tailwind 变体的组件。
• 类型安全 – 使用 TypeScript 为组件属性和变体类型提供约束。

衡量成功的指标

通过以下指标评估 Tailwind 实施的可扩展性：

• 生产环境 CSS 包大小
• 组件复用率
• 新功能实现所需时间
• 设计‑代码一致性

结论

Tailwind CSS 是构建设计系统的强大工具，但需要自律。把它视作设计系统工具，而不是单纯的样式技巧。集中管理令牌、抽取模式、合理使用插件，并通过自动化保持一致性。

遵循这些实践，你将避免难以维护的实用类混乱，同时保留 Tailwind 所带来的速度与灵活性。

原始发布于 frontendtools.tech