UnoCSS

官方文档：https://unocss.dev/interactive/

UnoCSS 是一个即时的、按需的原子化 CSS 引擎，旨在提供快速、灵活且可定制的 CSS 解决方案。它的核心理念是根据你在模板中的类名，动态生成 CSS，避免了不必要的全局 CSS 加载。

主要特点

• 即时按需：UnoCSS 会根据代码中使用的类名即时生成对应的 CSS，未使用的类名不会被包含在最终的 CSS 文件中，从而减小了文件体积。

• 高性能：它比 Windi CSS 或 Tailwind CSS JIT 快 5 倍。

• 轻量级：UnoCSS 零依赖且浏览器友好，压缩后体积约为 6kb。

• 可定制性强：所有 CSS 工具类都是通过预设提供，用户可以通过配置文件自定义规则、快捷方式、主题、变体等。

• 灵活性高：支持多种框架和工具的集成，如 Vite、Webpack 等。

使用场景

• Web 开发：在 Vue、React 等前端框架中使用，提升开发效率和代码可维护性。

• 小程序开发：支持在小程序中使用，提供了适配小程序的预设。

• 设计系统构建：可以为公司的设计系统创建预设，与团队共享。

• 快速原型设计：让你快速地开发和原型设计，而不需要考虑 CSS 的细节。

UnoCSS和Tailwind对比：

方面	UnoCSS	Tailwind
设计理念	按需生成，强调性能和灵活性	预定义大量原子类，强调“原子化”设计和团队协作
性能	CSS 文件小，按需生成，适合大规模应用	CSS 文件相对较大，可通过优化减小大小
定制性	高度灵活，支持动态生成和精细定制	通过配置文件和插件系统进行定制
开发体验	高效灵活，适合高度定制化需求	直接简单，适合团队开发，类名一致易理解
工作原理	基于实际使用动态生成 CSS	构建时生成所有可能的 CSS 类，再引用构建样式