1. 开发方式
1.1 传统 CSS
-
手写
CSS：你需要手动编写CSS规则，定义类名、ID或元素选择器，并为每个元素编写样式。 -
分离式开发 ：
HTML和CSS通常是分离的，HTML中通过类名或ID引用CSS文件中的样式。 -
示例：
html<div class="card">Hello World</div>css.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），通过组合这些类来实现复杂的设计。 -
示例：
html<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. 扩展
- 如果你要在项目中使用
Tailwind CSS, 可以结合 (shadcn/ui、Headless UI) 这些无头用户界面，无UI组件, 来定制 构建你的业务组件。- 换句话说，无头组件库，就是提供了一种方式来构建只包含逻辑和功能的组件，而内部不实现具体的
UI。它们包含了一些交互逻辑 和状态管理，但没有任何与视觉样式相关的代码。- 传统的
UI组件、通常被拆分为两大部分： 外观样式 、逻辑部分 ， 当你要为业务，修改某个组件的样式就要通过CSS破坏的方式来实现， 而这些无头组件库的出现，恰恰解决了这一痛点。 可以让你更快，更好解决：样式难以定制、耦合性高、创意受限、依赖过多等问题 。
Headless UI初探
- 完全自定义：开发者需要从头开始设计组件的外观。
- 灵活性高：适合需要独特设计风格的项目。
shadcn/ui初探
基于 Tailwind CSS：可以通过修改 Tailwind 配置文件或直接覆盖类名来自定义样式。
开箱即用：默认样式已经足够美观，适合快速开发。
它不是 一个组件库，它是可重用组件的集合，您可以将其复制并粘贴到应用中。
不是组件库意味着什么 ?
- 无需将其安装为依赖项。它无法通过 npm 分发。
- 选择您需要的组件，将代码复制并粘贴到项目中，并根据需要进行自定义。
- 以此作为构建自己的组件库的参考。
FAQ : 为什么要复制/粘贴而不是打包成依赖项？
这背后的想法是赋予您对代码的所有权和控制权，允许你决定如何构建组件和设置样式。
从一些合理的默认值开始，然后根据你的需要自定义组件。
将组件打包到 npm 包中的缺点之一是样式与实现耦合。组件的设计应与其实现分开。
使用
shadcn/ui、Headless UI的注意点：
对开发者能力要求高，需要较强的组件抽象设计能力。
对使用者：UI 层完全自定义，存在一定开发成本。
对使用者：新的编码风格需要一定的学习成本。