UnoCSS

UnoCSS是一个即时按需的原子化CSS引擎，由Anthony Fu开发，核心设计理念是极致性能和高度可定制。它没有内置实用工具，所有功能通过预设实现，用户可以根据项目需要灵活组合。UnoCSS的“按需”特性使其在构建时只生成实际使用的CSS，避免了冗余代码。

核心优势

• 极速性能：无需解析、AST或扫描，比Windi CSS或Tailwind CSS JIT快5倍。
• 轻量级：零依赖，浏览器友好，压缩后约6KB。
• 丰富集成：官方支持Vite、Nuxt、Next、Astro、Svelte、Webpack、PostCSS、CLI、VS Code、ESLint等。

主要功能

• 预设系统：包括mini、wind、icons、attributify、typography等官方预设，以及社区贡献的更多预设。
• 快捷方式：将多个工具类组合成一个自定义快捷方式，提升效率。
• 属性化模式：在HTML属性中分组工具类，使模板更整洁。
• 纯CSS图标：通过@unocss/preset-icons，使用任何图标库的图标作为单个类。
• 变体组：将具有共同前缀的工具类简写为组。
• CSS指令：在CSS中使用@apply等指令复用工具类。
• 编译模式：构建时将多个类合并为一个，减少产物大小。
• 检查器：交互式调试工具，查看生成的CSS。
• CDN运行时：一行CDN引入即可在浏览器中运行。

适用人群

适合追求高性能和灵活性的前端开发者，尤其是使用原子化CSS或需要高度定制样式生成的项目。对Vite、Nuxt等现代框架用户尤为友好。

使用方式

通过npm安装：npm install -D unocss。然后在构建工具（如Vite）的配置中引入UnoCSS插件，并选择所需预设。详细指南可参考官方文档的“Getting Started”部分。

注意事项

UnoCSS本身不包含任何实用工具，必须通过预设配置。虽然社区预设丰富，但建议先熟悉核心概念和预设系统。另外，部分高级功能如编译模式需要特定配置，请查阅文档。