UnoCSS

第一章：初始

一、简介

1. 是什么

UnoCSS 是即时按需的原子 CSS 引擎，其设计灵活且可扩展。核心是不固定的，所有 CSS 工具都是通过预设提供的。

注意：UnoCSS 是一个引擎，而非一款框架，因为它并未提供核心工具类，所有功能可以通过预设和内联配置提供。

参考文档

官方英文文档：UnoCSS 官方文档

第三方翻译中文文档：UnoCSS 中文文档 | Nodejs.cn 中文网

2. 特点

3. 原理

跳过解析，不使用 AST：Tailwind 依赖于 PostCSS 的 AST 进行修改，而 Windi 则是编写了一个自定义解析器和 AST。

考虑到在开发过程中，这些工具 CSS 的并不经常变化，UnoCSS 通过非常高效的字符串拼接来直接生成对应的 CSS 而非引入整个编译过程。

UnoCSS 对类名和生成的 CSS 字符串进行了缓存，当再次遇到相同的实用工具类时，它可以绕过整个匹配和生成的过程。

二、集成

1. Vite

1）安装 unocss 包

pnpm add -D unocss

Vite 插件随 unocss 包一起提供。

2）安装 unocss 的 Vite 插件

// vite.config.ts
import { defineConfig } from 'vite'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

3）创建 uno.config.ts 文件

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

4）将 virtual:uno.css 添加到你的主入口中：

// main.ts
import 'virtual:uno.css'

三、IDE 插件

VS Code 扩展：UnoCSS - Visual Studio Marketplace

JetBrains 扩展：Unocss Plugin for JetBrains IDEs | JetBrains Marketplace

第二章：核心理念

一、预设

官方包