【CSS】Tailwind CSS 与传统 CSS：设计理念与使用场景对比

1. 开发方式

1.1 传统 CSS

• 手写 CSS：你需要手动编写 CSS 规则，定义类名、ID 或元素选择器，并为每个元素编写样式。

• 分离式开发：HTML 和 CSS 通常是分离的，HTML 中通过类名或 ID 引用 CSS 文件中的样式。

• 示例：

  • <div class="card">Hello World</div>
    

  • .card {padding: 1rem;background-color: white;border-radius: 0.5rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    

1.2 Tailwind CSS

• 实用类优先：Tailwind 提供了大量的实用类（utility classes），你直接在 HTML 中使用这些类来构建样式，而不需要手写 CSS。

• 原子化 CSS：每个实用类只负责一个小的样式功能（如 p-4 表示 padding: 1rem），通过组合这些类来实现复杂的设计。

• 示例：

  • <div class="p-4 bg-white rounded-lg shadow-sm">Hello World</div>
    

2. 设计理念

2.1 传统 CSS

• 语义化：传统 CSS 强调语义化的类名（如 .card、.button），类名通常与组件的功能或内容相关。
• 可复用性：通过定义通用的类名，可以在多个地方复用样式。
• 灵活性：你可以完全控制样式的细节，但需要手动管理样式的组织和维护。

2.2 Tailwind CSS

• 功能优先：Tailwind 的类名直接描述样式功能（如 text-center、bg-blue-500），而不是语义。
• 原子化设计：通过组合多个实用类来实现样式，避免了重复定义样式规则。
• 约束性设计：Tailwind 提供了一套设计系统（如颜色、间距、字体大小等），帮助你保持设计的一致性。

3. 代码量

3.1 传统 CSS

• CSS 文件较大：你需要为每个组件或页面编写独立的 CSS 规则，可能会导致 CSS 文件体积较大。
• 重复代码：如果多个组件有相似的样式，可能会导致代码重复。

3.2 Tailwind CSS

• HTML 文件较大：由于直接在 HTML 中使用实用类，HTML 文件可能会显得臃肿。
• CSS 文件较小：Tailwind 通过 PurgeCSS 移除未使用的样式，最终生成的 CSS 文件通常较小。

4. 维护性

4.1 传统 CSS

• 维护成本较高：随着项目规模的增长，CSS 文件可能会变得难以维护，尤其是当多个开发者共同维护时。
• 命名冲突：需要小心管理类名，避免全局样式冲突。

4.2 Tailwind CSS

• 维护成本较低：由于样式是通过实用类直接应用的，减少了全局样式的冲突问题。
• 一致性：Tailwind 的设计系统确保了样式的一致性，减少了样式不一致的问题。

5. 学习曲线

5.1 传统 CSS

• 学习曲线较低：传统 CSS 是 Web 开发的基础，几乎所有开发者都熟悉。
• 灵活性高：你可以完全控制样式的细节，但需要掌握 CSS 的各种特性（如 Flexbox、Grid、动画等）。

5.2 Tailwind CSS

• 学习曲线较高：需要熟悉 Tailwind 的实用类命名规则和设计系统。
• 快速开发：一旦熟悉 Tailwind，可以快速构建复杂的界面，减少上下文切换（不需要在 HTML 和 CSS 文件之间来回切换）。

6. 适用场景

6.1 传统 CSS

• 适合小型项目：对于小型项目或简单的页面，传统 CSS 可能更直接。
• 高度定制化：如果你需要完全自定义样式，传统 CSS 提供了更大的灵活性。

6.2 Tailwind CSS

• 适合中大型项目：Tailwind 的设计系统和实用类非常适合需要快速迭代和保持一致性的项目。
• 组件化开发：与 React、Vue 等框架结合使用时，Tailwind 可以很好地支持组件化开发。

7. 性能

7.1 传统 CSS

• 性能依赖优化：如果 CSS 文件未经优化，可能会导致性能问题（如未使用的样式）。
• 全局样式：全局样式可能会导致不必要的样式覆盖和冲突。

7.2 Tailwind CSS

• 性能优化：通过 PurgeCSS 移除未使用的样式，生成的 CSS 文件通常较小。
• 局部样式：样式直接应用于 HTML 元素，减少了全局样式的影响。

8. 生态系统

8.1传统 CSS

• 生态系统丰富：有许多 CSS 预处理器（如 Sass、Less）和框架（如 Bootstrap、Foundation）可供选择。
• 工具链复杂：可能需要配置 PostCSS、Autoprefixer 等工具。

8.2 Tailwind CSS

• 生态系统完善：Tailwind 有丰富的插件（如 @tailwindcss/forms、@tailwindcss/typography）和社区支持。
• 工具链简单：Tailwind 提供了开箱即用的工具链（如 CLI、PostCSS 插件）。

9. 总结对比表

特性	传统 CSS	Tailwind CSS
开发方式	手写 CSS，分离式开发	实用类优先，原子化 CSS
设计理念	语义化，强调可复用性	功能优先，强调一致性
代码量	CSS 文件较大，HTML 文件较小	HTML 文件较大，CSS 文件较小
维护性	维护成本较高，容易冲突	维护成本较低，减少冲突
学习曲线	较低	较高
适用场景	小型项目，高度定制化	中大型项目，快速迭代
性能	依赖优化	通过 PurgeCSS 优化
生态系统	丰富，但工具链复杂	完善，工具链简单

10. 选择建议

• 如果你需要快速构建一致性的界面，并且喜欢在 HTML 中直接编写样式，Tailwind CSS 是一个很好的选择。
• 如果你需要完全控制样式细节，或者项目规模较小，传统 CSS 可能更适合。
• 两者并不是互斥的，你可以在同一个项目中结合使用 Tailwind CSS 和传统 CSS，根据具体需求选择最合适的工具。

11. 扩展

1. 如果你要在项目中使用 Tailwind CSS, 可以结合 (shadcn/ui 、Headless UI ) 这些无头用户界面，无 UI 组件, 来定制 构建你的业务组件。
2. 换句话说，无头组件库，就是提供了一种方式来构建只包含逻辑和功能的组件，而内部不实现具体的 UI。它们包含了一些交互逻辑和状态管理，但没有任何与视觉样式相关的代码。
3. 传统的 UI 组件、通常被拆分为两大部分： 外观样式、逻辑部分， 当你要为业务，修改某个组件的样式就要通过 CSS 破坏的方式来实现， 而这些无头组件库的出现，恰恰解决了这一痛点。 可以让你更快，更好解决：样式难以定制、耦合性高、创意受限、依赖过多等问题 。

Headless UI 初探

• 完全自定义：开发者需要从头开始设计组件的外观。
• 灵活性高：适合需要独特设计风格的项目。

shadcn/ui 初探

• 基于 Tailwind CSS：可以通过修改 Tailwind 配置文件或直接覆盖类名来自定义样式。

• 开箱即用：默认样式已经足够美观，适合快速开发。

• 它不是 一个组件库，它是可重用组件的集合，您可以将其复制并粘贴到应用中。

• 不是组件库意味着什么 ?

  • 无需将其安装为依赖项。它无法通过 npm 分发。
  • 选择您需要的组件，将代码复制并粘贴到项目中，并根据需要进行自定义。
  • 以此作为构建自己的组件库的参考。

• FAQ : 为什么要复制/粘贴而不是打包成依赖项？

  • 这背后的想法是赋予您对代码的所有权和控制权，允许你决定如何构建组件和设置样式。

  • 从一些合理的默认值开始，然后根据你的需要自定义组件。

  • 将组件打包到 npm 包中的缺点之一是样式与实现耦合。组件的设计应与其实现分开。

使用 shadcn/ui 、Headless UI 的注意点：

• 对开发者能力要求高，需要较强的组件抽象设计能力。

• 对使用者：UI 层完全自定义，存在一定开发成本。

• 对使用者：新的编码风格需要一定的学习成本。