UnoCSS

性能

从内部实现上看，Tailwind 依赖于 PostCSS 的 AST 进行修改。考虑到在开发过程中，这些工具 CSS 的并不经常变化，UnoCSS 通过非常高效的字符串拼接来直接生成对应的 CSS 而非引入整个编译过程。同时，UnoCSS 对类名和生成的 CSS 字符串进行了缓存，当再次遇到相同的实用工具类时，它可以绕过整个匹配和生成的过程。

可定制

相比于 tailwindcss 必须把原子类写到 class 里面， UnoCSS 提供了更多可选方案，并且兼容多种风格的原子类框架，除了 tailwindcss ，同样支持 Bootstrap， Tachyons，Windi CSS。

该预设尝试提供流行的功能优先框架（包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等）的共同超集。

例如，ml-3（Tailwind）、ms-2（Bootstrap）、ma4（Tachyons）和 mt-10px（Windi CSS）都是有效的。

.ma4 {
  margin: 1rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ms-2 {
  margin-inline-start: 0.5rem;
}
.mt-10px {
  margin-top: 10px;
}

 可写前缀组

// install pnpm add -D @unocss/transformer-variant-group 
// uno.config.ts 
import { defineConfig } from 'unocss' 
import transformerVariantGroup from '@unocss/transformer-variant-group' 
export default defineConfig({ 
    // ... transformers: [ transformerVariantGroup(), ], 
})

比如我们在设置字体的时候常常会设置颜色、大小，或者在 hover 的情况下改动多个属性我们就可以这样：

<div class="hover:bg-red-400 hover:font-medium font-weight font-light"/> 
<!-- UnoCss： --> 
<div class="hover:(bg-red-400 font-medium) font-(light weight )"/>

属性化模式

// install pnpm add -D @unocss/preset-attributify 
// uno.config.ts 
import { defineConfig } from 'unocss' 
import presetAttributify from '@unocss/preset-attributify' 
export default defineConfig({ 
    presets: [ presetAttributify({ /* preset options */ }), // ... ], 
})

<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>
<!-- UnoCss： --> 
<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>

快捷方式和指令

// install pnpm add -D @unocss/transformer-directives 
// uno.config.ts 
import { defineConfig } from 'unocss' 
import transformerDirectives from '@unocss/transformer-directives' 
export default defineConfig({ 
    // ... transformers: [ transformerDirectives(), ], 
})

tailwindcss 有指令系统，其中的 @layer components 指令可以把通用的样式 layer 到一个类上：

@layer components { 
    .btn-blue { 
        @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded; 
    } 
}

UnoCSS 有类似的更好用快捷方式来快捷实现这个功能：

shortcuts: [ 
    // you could still have object style 
    { 
       btn: 'py-2 px-4 font-semibold rounded-lg shadow-md', 
    },
     // dynamic shortcuts 
    [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`], 
]

另外还有一个使用很频繁的指令 @apply ，这个指令在以下两种情况下比较合适使用：

• 有一个样式很多，很复杂的元素，直接写到标签里面会影响代码可读性
• 同样的样式应用到很多元素上

<div text-lg text-pink-400 font-bold border-1 border-gray border-dashed rounded flex 
flex-warp items-center justify-evenly>test</div>
<button text-green-500 rounded hover:text-lg shadow-md>Submit</button>
<button text-green-500 rounded hover:text-lg shadow-md>Cancel</button>

UnoCss可以优化为：

<div class="complex-node">test </div> 
<button class="btn">Submit</button> 
<button class="btn">Cancel</button> 
<style> 
   .complex-node { 
      @apply text-lg text-pink-400 font-bold border-1 border-gray border-dashed rounded flex flex-warp items-center justify-evenly; 
    } 
    .btn { 
      @apply text-green-500 rounded hover:text-lg shadow-md; 
    } 
</style>

构建合并多个原子类到一个类

// install pnpm add -D @unocss/transformer-compile-class 
// uno.config.ts 
import { defineConfig } from 'unocss' 
import transformerCompileClass from '@unocss/transformer-compile-class' 
export default defineConfig({ 
    // ... transformers: [ transformerCompileClass(), ], 
})

这个特性一般比较少用，也可以看下是什么作用，通过 :uno: 标记，可以最终编译为一个类：

<div class=":uno: text-center sm:text-left">
    <div class=":uno: text-sm font-bold hover:text-red"/></div>
</div>

编译的结果为：

.uno-qlmcrp { 
    text-align: center; 
} 
.uno-0qw2gr { 
    font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; 
} 
.uno-0qw2gr:hover { 
    --un-text-opacity: 1; color: rgba(248, 113, 113, var(--un-text-opacity)); 
} 
@media (min-width: 640px) { 
    .uno-qlmcrp { 
        text-align: left; 
    } 
}

<div class="uno-qlmcrp">
 <div class="uno-0qw2gr"></div>
</div>

检查器，可以详细的预览我们项目中的所有原子类

我们在启动开发服务器之后，可以直接访问 localhost:3000/__unocss 就会看到这个画面：

直接就可以看到所有的原子类，具体某个组件中的原子类，打包后的体积等信息。

老版本使用UnoCSS ： UnoCSS 提供了 CDN 版本，在入口 index.html 文件中添加一行代码就可以支持，并且还支持配置：

<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script> 
<script> 
    // pass unocss options window.__unocss = { 
        rules: [ // custom rules... ], 
        presets: [ 
        // custom presets... 
        ], 
        // ... 
    } 
</script>