概念
原子化 CSS 是一种 CSS 架构，它通过将 CSS 样式拆分成更小的、可重用的组件来减少代码量。它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。
例： 预置的 class 列表
.m-1 {
margin-top: 0.25rem;
}
.p-1 {
padding-top: 0.25rem;
}
编码时直接在 class 中添加预置的 class 即可
<div class="m-1 p-1"></div
TailwindCSS
TailwindCSS 是一个开源的 CSS 框架，它提供了许多预置的 class，可以快速构建出各种样式。
优势
- 高效的样式管理
- 实用类优先：TailwindCSS 提供了大量的实用类，可以直接在 HTML 中使用，大大减少了编写自定义 CSS 的时间。
- 避免命名冲突：因为大部分样式都是通过实用类直接应用到元素上，不需要担心类名的命名冲突问题。
- 高度可定制
- 配置文件：TailwindCSS 提供了一个强大的配置文件 tailwind.config.js，可以根据项目需求定制颜色、间距、字体等。
- 插件系统：支持插件，可以扩展 TailwindCSS 的功能，满足各种自定义需求。
- 响应式设计
- 内置响应式工具：TailwindCSS 提供了丰富的响应式工具类，可以轻松实现不同设备上的响应式设计。
- 移动优先：默认采用移动优先的设计思路，简化了响应式设计的复杂度。
- 简化的开发流程
- 快速原型设计：因为可以直接在 HTML 中使用实用类，开发者可以快速构建页面原型，进行设计和测试。
- 减少上下文切换：开发者不需要频繁在 HTML 和 CSS 文件之间切换，提升了开发效率。
- 一致的设计
- 统一的设计语言：通过配置文件，整个项目可以保持一致的设计语言，减少了样式不一致的问题。
- 小尺寸的最终文件
- 按需打包：通过 PostCSS 和 PurgeCSS 等工具，TailwindCSS 可以移除未使用的 CSS 类，生成体积小的最终 CSS 文件，优化性能。
- 强大的社区和生态系统
- 丰富的资源：TailwindCSS 拥有一个活跃的社区，提供了丰富的插件、模板和工具，可以加速开发进程。
- 持续更新：TailwindCSS 团队和社区不断推出新功能和改进，保持框架的现代性和实用性。
- 文档全面
- 详细的文档：TailwindCSS 提供了全面且易懂的文档，使得新手也能快速上手，并充分利用其功能。
- 支持现代框架
- 兼容性：TailwindCSS 可以无缝集成到现代前端框架如 React, Vue, Angular 等中，提升了开发体验。
- 辅助开发
- JIT 模式：TailwindCSS 2.1 引入了 Just-in-Time (JIT) 编译模式，可以在开发过程中即时生成所需的 CSS 类，提升开发效率。
UnoCSS
UnoCSS 是即时原子 CSS 引擎，其设计灵活且可扩展。核心是不固定的，所有 CSS 工具都是通过预设提供的。
优势
- 完全可定制。没有核心工具，所有功能通过预设提供。
- 即时。无需解析，无需 AST，无需扫描。它比 Windi CSS 或 Tailwind CSS JIT 快 5 倍。
- 轻量
更多见文档
TailwindCSS VS UnoCSS
定制化和扩展性：
Tailwind CSS 是一个 PostCSS 插件，而 UnoCSS 是一个同构引擎，具有与构建工具（包括 PostCSS 插件）的一流集成集合。这意味着 UnoCSS 可以更灵活地用于不同的地方。
UnoCSS 提供了高度可定制的配置系统，允许开发者根据项目需求自由定义 CSS 类、主题、插件等。其配置文件支持复杂的逻辑和条件，使得样式的定义可以非常灵活和动态。
- 自定义规则：可以定义自定义的 CSS 规则，甚至是复杂的样式生成逻辑。
- 主题扩展：支持多主题，可以根据不同场景切换主题，满足多样化的需求。
- 配置选项：提供了丰富的配置选项，可以调整生成的 CSS 类的前缀、分隔符等，避免与其他类名冲突。
性能方面：
Tailwind 依赖于 PostCSS 的 AST 进行修改，需要借助 PurgeCSS 等工具来优化最终文件大小。
UnoCSS 即时编译和按需生成机制，更有优势。
UnoCSS 通过非常高效的字符串拼接来直接生成对应的 CSS 而非引入整个编译过程。同时，UnoCSS 对类名和生成的 CSS 字符串进行了缓存，当再次遇到相同的实用工具类时，它可以绕过整个匹配和生成的过程。比 Tailwind CSS JIT 快 5 倍。
