再见 Tailwind，你好 UnoCSS！快 200 倍的下一代原子化 CSS 引擎来了

前端开发者们，你们好！

还在为 Tailwind CSS 的性能和打包体积而纠结吗？或者觉得 Windi CSS 虽然快，但似乎停止了前进的脚步？

今天，向你隆重介绍 UnoCSS——一个由 Vue 和 Vite 核心团队成员 Anthony Fu 创建的、具有革命性的原子化 CSS 引擎。它不是另一个 CSS 框架，而是一个可以让你“设计”自己原子化 CSS 框架的“引擎”。

准备好体验“瞬间”生成 CSS 的快感了吗？让我们一探究竟！

UnoCSS 到底是什么？

简单来说，UnoCSS 是一个按需生成的、即时的原子化 CSS 引擎。

与 Tailwind CSS 不同，它本身不带任何预设的 CSS 工具类。它的核心是一个引擎，你可以通过各种预设 (Presets) 来组合和扩展，从而打造出完全符合你需求的原子化 CSS 方案。

核心亮点：

⚡️ 极致性能：比 Windi CSS 快约 200 倍，几乎没有性能开销。
🎨 完全可定制：通过预设组合，你可以模拟 Tailwind CSS、Tachyons 等任何框架的语法。
🧩 Attributify 模式：将工具类写在属性里，让模板更整洁！
⚛️ 纯 CSS 图标：集成数万个图标，像使用普通 CSS 类一样简单。
🛠️ 零配置开箱即用：默认提供一个兼容 Tailwind CSS 的预设，上手无压力。
📦 打包体积极小：最终生成的 CSS 文件只包含你用到的样式，极致优化。

在 Vite + Vue 项目中快速上手

让我们以最常见的 Vite + Vue 项目为例，看看集成 UnoCSS 有多简单。

1. 安装依赖

npm install -D unocss

2. 配置 Vite

在你的 vite.config.js (或 .ts) 文件中，引入并使用 UnoCSS 插件。

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import UnoCSS from "unocss/vite";

export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(), // <-- 在这里添加
  ],
});

3. 引入 CSS

在你的主入口文件 main.js (或 .ts) 中，导入虚拟的 uno.css。为了确保样式优先级，建议将其放在最前面。

// main.js
// 导入 UnoCSS
import "uno.css";

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

完成了！现在你可以在你的组件中直接使用原子化 CSS 了。

4. 开始使用

<template>
  <div class="m-4 p-4 rounded-lg bg-gray-100">
    <h1 class="text-2xl font-bold text-center text-purple-600">
      Hello, UnoCSS!
    </h1>
    <button
      class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition-colors"
    >
      Click Me
    </button>
  </div>
</template>

当你保存文件时，UnoCSS 会瞬间扫描你用到的 m-4, text-2xl 等类，并实时生成对应的 CSS，然后注入到浏览器中。整个过程快到你几乎感觉不到它的存在！

探索强大的预设 (Presets)

UnoCSS 的真正魅力在于其可组合的预设系统。默认情况下，它会使用 @unocss/preset-uno，这基本是 Tailwind CSS 的超集。

但我们可以玩得更花哨！比如，启用属性化模式 (Attributify Mode) 和 图标预设。

1. 安装预设

npm install -D @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

2. 创建配置文件

在项目根目录创建一个 uno.config.js 文件：

// uno.config.js
import { defineConfig } from "unocss";
import presetUno from "@unocss/preset-uno";
import presetAttributify from "@unocss/preset-attributify";
import presetIcons from "@unocss/preset-icons";

export default defineConfig({
  // ...UnoCSS 配置
  presets: [
    presetUno(),
    presetAttributify({
      /* 预设选项 */
    }),
    presetIcons({
      // 图标预设选项
      scale: 1.2,
      warn: true,
    }),
  ],
  // 你还可以在这里自定义规则和快捷方式
  shortcuts: [
    // 静态快捷方式
    [
      "btn",
      "px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50",
    ],
    // 动态快捷方式
    [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`],
  ],
});

3. 体验新模式

现在，你的组件可以这样写，是不是清爽多了？

<template>
  <div m-4 p-4 rounded-lg bg-gray-100 flex="~ col" items-center>
    <h1 text="2xl center purple-600" font-bold>Hello, Attributify Mode!</h1>

    <!-- 使用静态快捷方式 -->
    <button class="btn mt-4">Static Shortcut</button>

    <!-- 使用动态快捷方式 -->
    <button class="btn-red mt-4">Dynamic Shortcut</button>

    <!-- 使用图标 -->
    <div class="flex items-center gap-4 mt-4">
      <div class="i-carbon-sun text-yellow-500 text-2xl" />
      <div class="i-carbon-moon text-gray-700 text-2xl" />
      <div class="i-logos-vue text-3xl" />
    </div>
  </div>
</template>

属性化模式：m-4, p-4 直接作为属性写入标签。对于需要前缀的工具类（如 flex），可以使用 flex="~ col" 这样的语法。
快捷方式 (Shortcuts)：我们将一长串 class 定义为 btn，方便复用。甚至可以创建 btn-red 这样的动态快捷方式。
图标：i-carbon-sun 会被自动转换成一个纯 CSS 实现的图标！无需加载任何字体文件。你可以在 Icônes 上找到所有可用的图标集。

进阶玩法：自定义你的 CSS 宇宙

UnoCSS 不仅仅是预设的组合，它还允许你创建自己的规则、变体和提取器。

自定义规则 (Rules)

如果你需要一个预设里没有的特殊工具类，可以轻松添加。

// uno.config.js
// ...
export default defineConfig({
  // ...
  rules: [
    // 创建一个 'p-safe' 类，用于在 iOS 安全区域添加内边距
    [
      "p-safe",
      {
        padding:
          "env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)",
      },
    ],
    // 创建一个动态规则，如 'text-stroke-2' -> -webkit-text-stroke-width: 2px
    [
      /^text-stroke-(\d+)$/,
      ([, d]) => ({ "-webkit-text-stroke-width": `${d}px` }),
    ],
  ],
});

变体 (Variants)

变体可以让你在特定条件下应用工具类，例如 hover, dark, md: (媒体查询) 等。UnoCSS 的变体可以任意组合！

<!-- 只有在暗黑模式下，当屏幕宽度大于 md 时，鼠标悬停才会触发背景色改变 -->
<div
  class="
  dark:md:hover:bg-gray-800
"
>
  Hello Variants
</div>

<!-- Attributify 模式下的变体组合 -->
<div dark:md:hover="bg-gray-800 text-white">Hello Variants</div>

`@apply` 指令

有时你需要在 <style> 块中复用原子化类，这时 @apply 就派上用场了。

<style scoped>
.my-complex-component {
  /* 使用 @apply 复用工具类 */
  @apply p-4 bg-blue-100 rounded-lg;
  @apply dark:(bg-gray-800 text-white);
}
</style>

要启用 @apply，你需要安装并配置 @unocss/transformer-directives。

npm install -D @unocss/transformer-directives

// uno.config.js
import transformerDirectives from "@unocss/transformer-directives";

export default defineConfig({
  // ...
  transformers: [transformerDirectives()],
});

总结

UnoCSS 通过其创新的引擎设计，为原子化 CSS 带来了前所未有的性能和灵活性。它不仅解决了现有方案的痛点，还通过属性化模式、纯 CSS 图标、可组合的变体和强大的自定义能力，极大地提升了开发体验。

它代表了原子化 CSS 的未来方向：一个由你定义、为你服务的、即时响应的 CSS 引擎。

如果你正在寻找一个更快、更灵活、更现代的 CSS 解决方案，那么 UnoCSS 绝对值得一试。现在就去你的项目中试试吧，体验一下 CSS 开发的“飞一般”的感觉！

原文链接：https://code.ifrontend.net/archives/1215，转载请注明出处。

UnoCSS 到底是什么？

在 Vite + Vue 项目中快速上手

1. 安装依赖

2. 配置 Vite

3. 引入 CSS

4. 开始使用

探索强大的预设 (Presets)

1. 安装预设

2. 创建配置文件

3. 体验新模式

进阶玩法：自定义你的 CSS 宇宙

自定义规则 (Rules)

变体 (Variants)

`@apply` 指令

总结

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

再见 Tailwind，你好 UnoCSS！快 200 倍的下一代原子化 CSS 引擎来了

UnoCSS 到底是什么？

在 Vite + Vue 项目中快速上手

1. 安装依赖

2. 配置 Vite

3. 引入 CSS

4. 开始使用

探索强大的预设 (Presets)

1. 安装预设

2. 创建配置文件

3. 体验新模式

进阶玩法：自定义你的 CSS 宇宙

自定义规则 (Rules)

变体 (Variants)

@apply 指令

总结

猜你喜欢

Tailwind CSS v4 终极指南：体验 Rust 驱动的闪电般性能与现代化 CSS 工作流

Vue 3 实战：从零到一用 vue-pdf-embed 打造功能齐全的 PDF 查看器

前端仔告别后端！Vue 3 轻松搞定 Excel 导入导出，同事都惊呆了！

VeeValidate v4 终极指南：精通 Vue 3 组合式 API 表单验证

Vue 3 二维码扫描终极指南：轻松集成 html5-qrcode，让你的应用“码”力全开！

尤雨溪推荐！Vue 3 表单验证神器 @vorms/core – 极简API，强大功能

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

`@apply` 指令