人人都会AI编程

原子化 CSS：Tailwind CSS / UnoCSS 在 Vue 中的集成

更新时间：2026-07-10

原子化 CSS 的核心思想是用单一用途的工具类直接构建样式，而不是编写自定义语义化类名。你不再为按钮取名叫 .btn-primary，而是直接在 HTML 中写 bg-blue-500 text-white px-4 py-2 rounded，每一项类名对应一个独立的 CSS 属性。这种方式看似“倒退”，但在组件化开发中带来了明显的效率提升：样式与结构同处一处，不需要在 .css 文件和模板之间来回跳转，组件删除时对应的样式也不会残留在样式表中。

Vue 的单文件组件（SFC）天然适合原子化 CSS。<template>、<script>、<style> 本来就在一个文件里，原子化 CSS 把样式的一部分也挪进了模板，让组件的视觉呈现变得“所见即所得”。

Tailwind CSS 的集成与使用

安装与配置（Vite 项目）

npm install -D tailwindcss @tailwindcss/vite

然后在 vite.config.ts 中引入插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

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

在入口 CSS 文件（如 src/style.css）中添加 Tailwind 的指令：

@import "tailwindcss";

至此，Tailwind 会自动扫描你项目中所有模板文件里出现的工具类名，生成对应的最小化 CSS。无需额外配置，工具类就可以直接在组件中使用了。

基础用法示例

<template>
  <div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded-xl shadow-md">
    <h1 class="text-xl font-semibold text-gray-800 mb-4">用户信息</h1>
    <p v-if="isOnline" class="text-green-600 text-sm">在线</p>
    <p v-else class="text-gray-400 text-sm">离线</p>
    <button
      class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors"
      @click="toggleStatus"
    >
      切换状态
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isOnline = ref(true)
const toggleStatus = () => { isOnline.value = !isOnline.value }
</script>

与 Vue 响应式的结合

动态类名可以直接用模板绑定：

<div :class="[
  'p-4 border rounded',
  isActive ? 'bg-green-100 border-green-300' : 'bg-gray-50 border-gray-200'
]">
  内容
</div>

为了避免冗长的条件拼接，可以使用 cn() 这样的工具函数（通常配合 clsx 或 tailwind-merge 解决样式冲突问题）：

import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs) {
  return twMerge(clsx(inputs))
}

然后在组件中用：

<div :class="cn('p-4 rounded', isActive && 'bg-green-100 border-green-300')">

Tailwind 在 Vue 中的最佳实践

  • 避免滥用 @apply：@apply 可以将多个工具类合并成一个自定义类，但过度使用会丧失原子化 CSS“结构即样式”的直观性，建议只在确实需要复用但又不想抽组件的按钮、排版等“原子组件”上使用。
  • 善用 theme 定制：在 vite.config.ts 或专门的 Tailwind 配置中扩展颜色、间距等设计令牌，保持项目视觉一致性。
  • 配合 IDE 插件：安装 “Tailwind CSS IntelliSense” 插件，可以在编辑器中自动补全类名、预览颜色，大幅降低记忆负担。

UnoCSS：更灵活的原子化替代

UnoCSS 是速度更快、可扩展性更强的原子化 CSS 引擎，集成了 Windi CSS、Tailwind CSS 等预设，同时支持按需生成、图标集、属性模式等多种高级特性。如果你需要更精简的配置、更快的 HMR，或者希望直接通过属性写样式，UnoCSS 是一个值得考虑的选择。

安装与配置

npm install -D unocss

在 vite.config.ts 中：

import UnoCSS from 'unocss/vite'

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

然后在入口引入 virtual:uno.css：

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

默认预设包含了与 Tailwind 兼容的工具类，所以你几乎可以从 Tailwind 无缝切换过来。

UnoCSS 的高级玩法

  • 属性模式（Attributify Mode）：不需要写 class，直接在 HTML 属性中书写工具类，更加简洁：
<button
  bg="blue-400 hover:blue-500"
  text="white sm"
  font="mono light"
  p="y-2 x-4"
  border="rounded"
  @click="fn"
>
  Button
</button>
  • 图标集成：安装 @unocss/preset-icons 后，可以直接使用任何 Iconify 图标集，以类名形式插入图标：
<i class="i-carbon-logo-github text-xl" />
  • 自定义规则极简：在 uno.config.ts 中可以自由添加工具类规则，比如：
import { defineConfig } from 'unocss'

export default defineConfig({
  rules: [
    ['v-center', { display: 'flex', 'align-items': 'center', 'justify-content': 'center' }]
  ]
})

然后在模板直接 v-center。

UnoCSS 与 Vue 的配合

UnoCSS 天然支持 Vue <script setup> 中的动态类名，与 Tailwind 使用方式完全一致，性能更优（HMR 通常在几毫秒内生效）。如果你的项目已经开始用 UnoCSS，强烈推荐开启 “Preset Attributify” 和 “Preset Icons”，这能让 Vue 模板的样式部分更加简洁易读。

如何选择？

| 维度 | Tailwind CSS | UnoCSS |
|------|--------------|--------|
| 社区生态 | 最大，教程、组件库、插件极多 | 较小，但官方预设可兼容大部分 Tailwind 用法 |
| 性能 | 优秀，但扫描所有文件仍有一定开销 | 极快，按需生成，HMR 几乎无延迟 |
| 定制性 | 配置体系完善，迁移成本低 | 极高，可自由扩展规则、变体、预设 |
| 易上手 | 文档详尽，学习资料丰富 | 需要一定适应，但默认预设与 Tailwind 类似 |

  • 如果你追求省心、团队熟悉度要求高，又不需要极端性能，Tailwind CSS 是稳妥之选。
  • 如果你追求极致的开发体验，喜欢自定义规则，或者需要属性模式、图标集等特性，UnoCSS 会给你更多惊喜。

无论选哪一款，原子化 CSS 进入 Vue 项目后，最大的实际变化就是：你不再维护一份独立的 CSS 文件，组件的全部视觉表现都在模板里一目了然，改样式就是改模板上的几个类名，从而显著降低样式管理的心理负担。