雷同的原由 & 前言

如果你没有据说过 tailwindcss 或者 unocss，请先 return 先去理解一下。

  • 开发上：可能为你甚至你们的前端团队节俭很多写款式的工夫，也能让你或者你们的我的项目开发体验有很大晋升
  • 生产上：你们的我的项目打进去的包体积中的款式代码占比将忽然骤降而后趋于不变。

书接上回

之前我写过一篇文章给我一个你不必tailwindcss的理由！，极力推荐应用 tailwindcss 来晋升开发效率和体验，尤其是款式代码的体验会有质的晋升。当然款式代码打包体积的缩小也能够起到优化咱们整体前端我的项目的作用。然而为什么有这篇文章了呢？因为托尼老师给了我不必 tailwindcss 的理由，无奈回绝的理由，就是咱们明天的配角 UnoCSS

为什么我换到了UnoCSS

tailwindcss 和 UnoCSS 都是原子化CSS模式实现的一种，为什么当初我更举荐 UnoCSS ，接下来就讲一下 UnoCSS 的杀手级亮点：

极致性能

这里我借用托尼老师的话：

No parsing, no AST, no scanning, it's INSTANT (5x faster than Windi CSS or Tailwind JIT).

跳过解析，不应用 AST

从外部实现上看，Tailwind 依赖于 PostCSS 的 AST 进行批改。思考到在开发过程中，这些工具 CSS 的并不常常变动，UnoCSS 通过十分高效的字符串拼接来间接生成对应的 CSS 而非引入整个编译过程。同时，UnoCSS 对类名和生成的 CSS 字符串进行了缓存，当再次遇到雷同的实用工具类时，它能够绕过整个匹配和生成的过程。

当初说是比 tailwindcss 快5倍，其实当年可是比 tailwindcss JIT 模式快200倍的存在，前面 tailwindcss 应该是做了大量的优化工作，才让托尼老师改口称5倍快了。

齐全可定制，不是一个框架，而是引擎

相比于 tailwindcss 必须把原子类写到 class 外面， UnoCSS 提供了更多可选计划，并且兼容多种格调的原子类框架，除了 tailwindcss ，同样反对 Bootstrap， Tachyons，Windi CSS

属性化模式

这个模式也是由 Windi CSS 启发而来：
Attributify preset

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

：

<div class="m-2 rounded text-teal-400" /><!-- 当初你能够这么写： --><div m-2 rounded text-teal-400 />

前缀组，解决繁琐的屡次写前缀的状况

Variant group transformer

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

比方咱们在设置字体的时候经常会设置色彩、大小，或者在 hover 的状况下改变多个属性咱们就能够这样：

<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/><!-- 简化之后： --><div class="hover:(bg-gray-400 font-medium) font-(light mono)"/>

快捷方式和指令

Directives transformer

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

用过 tailwindcss 的同学都晓得， 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>  我的款式很简单的</div><button text-green-500 rounded hover:text-lg shadow-md>查问</button><button text-green-500 rounded hover:text-lg shadow-md>提交</button><button text-green-500 rounded hover:text-lg shadow-md>勾销</button>

就能够这么优化：

<div class="complex-node">  我的款式很简单的</div><button class="btn">查问</button><button class="btn">提交</button><button class="btn">勾销</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>

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

Compile class transformer

// installpnpm add -D @unocss/transformer-compile-class// uno.config.tsimport { 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 class="uno-qlmcrp">  <div class="uno-0qw2gr"/></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;  }}

查看器，能够具体的预览咱们我的项目中的所有原子类

咱们在启动开发服务器之后，能够间接拜访localhost:5173/__unocss 就会看到这个画面：


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

你的我的项目太老也想用？安顿！

有些同学可能还在保护很老的前端我的项目，然而也想用上 UnoCSS 来晋升开发体验， UnoCSS 提供了 CDN 版本，在前端的入口 index.html 文件中增加一行代码就能够反对，并且还反对配置：

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

VS Code 插件当然也有

UnoCSS - Visual Studio Marketplace

你认为到这里就完结了？

再来给你看个好货色！

Icons preset (unocss.dev)

能够在 UnoCSS 中轻松集成纯 CSS 图标，能够在这里查看所有可用图标，想用哪种就能够装置对应的包即可：

// uno.config.tsimport { defineConfig } from 'unocss'import presetIcons from '@unocss/preset-icons'export default defineConfig({  presets: [    presetIcons({ /* options */ }),    // ...other presets  ],})

没有你们设计中意的图标，UI 本人设计的图标也能够轻松集成,首先装置工具：

pnpm install -D @iconify/utils

而后把设计老师给的 svg 图标文件放到一个文件夹，我这里就放到src/assets/svg中，而后想一个图标名称，这里就叫 icon 吧

// unocss.config.tsimport { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'import {  defineConfig,  presetAttributify,  presetIcons,  presetUno,} from 'unocss'export default defineConfig({  presets: [    presetUno(),    presetAttributify(),    presetIcons({      collections: {        icon: FileSystemIconLoader(          './src/assets/svg',          svg => svg.replace(/#FFF/, 'currentColor'),        ),      },      scale: 1.5,      warn: true,    }),  ],})

能够看到配置中 collections 外面有一个 icon 对象，这个名称就对应了咱们方才说的 icon 名称，对应的是一个 FileSystemIconLoader 办法，办法的第一个参数是你的图标在我的项目中的门路，我这里就是 ./src/assets/svg，依照相对路径就能够，也能够通过第二个参数做一些非凡预处理操作，具体能够看这个文档，这样配置实现之后，咱们就能够在我的项目应用了。

比方我在src/assets/svg文件夹中放了一个 cancel.svg 的勾销图标，我在页面上应用就能够这样写：

<div text-lg text-red inline-block i-icon:cancel />

其中的 i-icon 就是咱们后面配置的自定义图标集的名称，冒号前面跟的就是你的 svg 图标的名称，能够通过款式扭转图标的大小和色彩，是不是很酷。

丰盛、灵便、凋谢的预设生态

UnoCSS 提供了丰盛的预设，以反对不同格调体系的前端开发者，生态很欠缺，在 UnoCSS 公布之后我在很多我的项目中都利用实际过，根本能够笼罩所有款式场景。

总结

原子化CSS 的理念早已不是陈腐事物了， tailwindcss 、UnoCSS 这类解决方案把这个理念有了一个很好的实际和实现，能够真正的晋升开发者体验和编码效率，都是很值得一学的技术。最初，有用请点赞，喜爱请关注，我是Senar，咱们下一篇再见～