是什么
UnoCSS 是一个即时按需的原子化 CSS 引擎
即时按需
- 开发模式下动态生成实际使用的样式 (Tailwind CSS 需要预生成)
- 只打包实际使用的样式规则 (Tailwind CSS 需要额外配置)
原子化
- 每个 CSS 类名对应单一 CSS 声明（如
p-4→padding: 1rem） - 支持状态变体（如
hover:、dark:等前缀）
优点
- 通过组合原子类构建复杂样式
- 消除传统 CSS 的 class 命名难题
- 避免样式冲突 (相同的类名有被覆盖的风险)
引擎
- 不绑定特定语法（可同时支持 Tailwind/Windi CSS 等不同风格）
- 规则与生成解耦（开发者可以自定义任意格式的原子类规则）
- 构建工具友好（作为 PostCSS 插件或 Vite/Rollup 模块集成）
插件
https://unocss.dev/integrations/vscode
- 🔍 智能感知：输入类名时自动补全可用原子类（如输入
text-显示所有颜色选项） - 🎨 实时预览：悬停在类名上显示生成的 CSS 规则（支持响应式变体/状态前缀）
- 🚦 错误检测：标记未定义的类名（如拼写错误的
tx-red会提示正确写法text-red） - 📁 项目感知：自动读取项目中的 unocss.config.ts 配置（确保提示与项目规则一致）
注意
要先在项目中创建 uno.config.ts 配置文件才能启用插件