Tailwind CSS vs CSS Modules：如何选择？

为你的下一个项目选择 CSS 策略是最重要的架构决策之一。Tailwind CSS 和 CSS Modules 代表了两种根本不同的理念：实用优先的内联样式 vs 组件作用域的传统 CSS。本指南提供深入、实用的对比分析，帮助你根据团队情况、项目规模和技术需求做出正确选择。

什么是 Tailwind CSS？

Tailwind CSS 是一个实用优先的 CSS 框架，提供数千个单一用途的小类名，如 flex、pt-4、text-center 和 rounded-lg。你不需要编写自定义 CSS，而是通过在 HTML 或 JSX 中组合实用类来直接构建设计。框架通过构建时扫描过程只生成项目实际使用的 CSS。

Tailwind 获得广泛采用，因为它完全消除了命名问题。你永远不需要发明类似 .sidebar-inner-wrapper-card-header 的类名。Tailwind v4（2025 年发布）通过基于 Rust 的引擎和零配置设置变得更快。

// Tailwind CSS — React 组件示例
function ProductCard({ product }) {
  return (
    <div className="group relative rounded-2xl border
                    border-gray-200 bg-white p-6 shadow-sm
                    transition-all hover:shadow-xl
                    dark:border-gray-700 dark:bg-gray-800">
      <img src={product.image} alt={product.name}
           className="h-full w-full object-cover
                      group-hover:scale-110" />
      <h3 className="text-lg font-semibold text-gray-900
                     dark:text-white">{product.name}</h3>
      <button className="rounded-lg bg-blue-600 px-4 py-2
                         text-white hover:bg-blue-700">
        Add to Cart
      </button>
    </div>
  );
}

什么是 CSS Modules？

CSS Modules 是一种 CSS 文件约定，其中所有类名默认局部作用于组件。当你导入 CSS Module 文件时，每个类名在构建时会获得唯一的哈希后缀（如 .title 变为 .title_a1b2c3），防止组件之间的样式冲突。CSS Modules 可与纯 CSS、Sass、Less 和 PostCSS 配合使用。

CSS Modules 被 Next.js、Vite、webpack 和大多数现代打包工具原生支持，无需额外配置。它们提供熟悉的 CSS 编写体验，同时解决了全局作用域问题。无论类名如何命名，你的样式都保证不会泄漏到其他组件。

/* ProductCard.module.css */
.card {
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

// ProductCard.tsx
import styles from './ProductCard.module.css';

function ProductCard({ product }) {
  return (
    <div className={styles.card}>
      <h3 className={styles.title}>{product.name}</h3>
    </div>
  );
}

正面对比

此表总结了在实际项目中最重要的维度上的关键差异：

开发者体验

开发者体验是这两种方法差异最大的地方。

性能对比

两种方法在生产环境中都能产生高度优化的输出，但通过不同的机制：

大规模可维护性

每种方法在拥有众多贡献者的大型代码库中表现如何？

响应式设计

两种方法都能很好地处理响应式设计，但人体工程学不同：

/* Tailwind — 内联响应式 */
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
                gap-4 md:gap-6 lg:gap-8">
  ...
</div>

/* CSS Modules — 样式表中的响应式 */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

深色模式实现

深色模式是常见需求，两种方法的处理方式不同：

/* Tailwind — 使用 dark: 前缀 */
<div className="bg-white dark:bg-gray-900
                text-gray-900 dark:text-gray-100">
  ...
</div>

/* CSS Modules — 使用 CSS 自定义属性 */
:root { --bg-primary: #ffffff; --text-primary: #111827; }
[data-theme="dark"] { --bg-primary: #111827; --text-primary: #f9fafb; }

.container { background: var(--bg-primary); color: var(--text-primary); }

何时选择 Tailwind CSS

• 快速原型开发和 MVP，开发速度是首要优先级。
• 希望从第一天起就有内置设计系统（一致的间距、颜色和排版）的团队。
• 设计师和开发者紧密合作且使用相同设计令牌的项目。
• 组件密集型应用（React、Vue、Svelte），其中样式自然与标记共置。
• 希望最小化 CSS 文件管理并完全避免命名约定的团队。
• 具有大量响应式和深色模式需求的项目，Tailwind 的修饰符（md:、dark:、hover:）能减少样板代码。

何时选择 CSS Modules

• 拥有强 CSS 专业知识、偏好使用完整 CSS 能力编写传统样式表的团队。
• 需要复杂 CSS 特性（如动画、伪元素、容器查询和 CSS 网格布局）的项目，这些特性受益于专门的样式表文件。
• 样式隔离至关重要的大型代码库，你需要保证样式不泄漏且无运行时开销。
• 从遗留 CSS 代码库逐步迁移，因为 CSS Modules 允许与现有全局样式并存地渐进采用。
• 优先考虑干净、可读的 JSX 模板而非共置样式的应用。
• 使用服务端渲染（SSR）的项目，偏好零 JavaScript CSS 方案以提高性能。

混合方案

许多成功的团队在同一项目中同时使用 Tailwind 和 CSS Modules。Tailwind 处理布局、间距和实用样式，而 CSS Modules 处理复杂的组件特定样式（如动画和复杂的悬停效果）。

// 混合方案：Tailwind 做布局 + CSS Module 做复杂样式
import styles from './AnimatedCard.module.css';

function AnimatedCard({ front, back }) {
  return (
    <div className={`${styles.card} w-64 h-80`}>
      <div className={styles.inner}>
        <div className={`${styles.front} rounded-xl bg-white
                         shadow-lg p-6`}>
          {front}
        </div>
        <div className={`${styles.back} rounded-xl bg-blue-600
                         text-white p-6`}>
          {back}
        </div>
      </div>
    </div>
  );
}

最佳实践

• Tailwind：将重复的类模式提取到可复用的 React 组件中，而非 @apply 指令。在组件框架中，组件本身就是抽象层。
• Tailwind：使用 Prettier 插件（prettier-plugin-tailwindcss）自动按一致顺序排序类名，使类字符串更易阅读和审查。
• CSS Modules：使用 CSS 自定义属性（设计令牌）来定义颜色、间距和排版，在没有框架的情况下保持组件间的一致性。
• CSS Modules：使用 composes 关键字在模块之间共享通用样式，避免重复同时保持作用域。
• 两者：设置代码检查。Tailwind 用 eslint-plugin-tailwindcss，CSS Modules 用 stylelint，尽早发现错误并强制执行规范。
• 两者：测量生产环境的 CSS 包大小。使用 Lighthouse 或 webpack-bundle-analyzer 等工具确保你的 CSS 策略不会产生不必要的大负载。

FAQ