windi css 是一个实用的 css 框架，能够帮助前端快速搭建项目页面。相较于知名的 tailwind css，其提供更快的加载速度和热更新响应。

而脱胎于 windi css 的 unocss - 一个具有高性能且极具灵活性的即时原子化 css 引擎，将会成为 windi css v4 版本的引擎。unocss 本身非常具有潜力，有望成为 css 未来的一大基座。

unocss 具有多项超前优势：

直观符合常识且可定制化的规则。

// 静态化规则rules: [  ['m-1', { margin: '0.25rem' }]]// 动态化规则rules: [  [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],  [/^p-(\d+)$/, (match) => ({ padding: `${match[1] / 4}rem` })],]

在使用时：

<div class="m-100">  <button class="m-3">    <icon class="p-5" />    My Button  </button></div>

生成的 css：

.m-100 { margin: 25rem; }.m-3 { margin: 0.75rem; }.p-5 { padding: 1.25rem; }

可变修饰

variants: [  // 支持所有规则的 `hover:`  {    match: s => s.startsWith('hover:') ? s.slice(6) : null,    selector: s => `${s}:hover`,  },  // 支持 `!` 前缀，使规则优先级更高  {    match: s => s.startsWith('!') ? s.slice(1) : null,    rewrite: (entries) => {      // 在所有 CSS 值中添加 ` !important`      entries.forEach(e => e[1] += ' !important')      return entries    },  }],

预设

可以将自己的自定义规则和可变修饰打包成预设，与他人分享，或是使用 UnoCSS 作为引擎创建你自己的原子化 CSS 框架。

属性化模式

对于冗长可读性差的 css class：

<button class="bg-blue-400 hover:bg-blue-500 text-sm text-white font-mono font-light py-2 px-4 rounded border-2 border-blue-200 dark:bg-blue-500 dark:hover:bg-blue-600">  Button</button>

转化成：

<button   bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"  text="sm white"  font="mono light"  p="y-2 x-4"  border="2 rounded blue-200">  Button</button>

纯 CSS 图标

纯 CSS 的图标，不需要任何 JavaScript。

<!-- A basic anchor icon from Phosphor icons --><div class="i-ph-anchor-simple-thin" /><!-- An orange alarm from Material Design Icons --><div class="i-mdi-alarm text-orange-400 hover:text-teal-400" /><!-- A large Vue logo --><div class="i-logos-vue text-3xl" /><!-- Sun in light mode, Moon in dark mode, from Carbon --><button class="i-carbon-sun dark:i-carbon-moon" /><!-- Twemoji of laugh, turns to tear on hovering --><div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

CSS 作用域

<template>  <div class="m-2 rounded"><slot></div><template><!-- 以下内容将被注入 bundler 中 --><style scoped>.m-2{margin:0.5rem;}.rounded{border-radius:0.25rem;}</style>

性能

UnoCSS 可以比 Tailwind 的 JIT 引擎快 200 倍。

目前 UnoCSS 已获得 7.2k star，可谓是 css 的明日之星，值得学习！

github 地址：
https://github.com/unocss/unocss#custom-variants

文档地址：
https://github.com/unocss/unocss#custom-variants