UnoCSS / Tailwind CSS 速查

UnoCSS 和 Tailwind CSS 都是原子化 CSS 框架，语法高度兼容。

这页适合作为“原子化 CSS 的速查入口”。真正决定项目可维护性的不是类名会不会写，而是是否统一约定：什么时候用原子类、什么时候抽组件、什么时候沉淀成快捷方式。

先选框架还是先定规范

如果项目还没定方向，建议先想清楚下面几件事：

• 是更看重兼容 Tailwind 生态，还是更看重生成灵活度与体积控制
• 是否需要 Attributify、图标预设、动态规则等 UnoCSS 特性
• 团队是否已经有现成的 Tailwind 设计体系
• 是否允许任意值和随手堆过长类名

项目一旦落地，最好长期坚持一种主方案，避免 UnoCSS 和 Tailwind 思维混用导致维护成本上升。

布局

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <div class="flex flex-col gap-2">
    <div class="flex-1 flex-shrink-0">
      <!-- Grid -->
      <div class="grid grid-cols-3 gap-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="col-span-2"></div>
        </div>
      </div>
    </div>
  </div>
</div>

间距

<!-- padding -->
<div class="p-4 px-6 py-2 pt-4 pb-0">
  <!-- margin -->
  <div class="m-4 mx-auto my-2 mt-8 mb-0">
    <div class="-mt-2">
      <!-- 负值 -->

      <!-- gap -->
      <div class="gap-4 gap-x-2 gap-y-6"></div>
    </div>
  </div>
</div>

数值对照：1 = 0.25rem = 4px，4 = 1rem = 16px

尺寸

<div class="w-full h-screen min-h-0 max-w-md">
  <div class="w-48 h-48">
    <!-- 12rem -->
    <div class="w-[300px] h-[50vh]">
      <!-- 任意值 -->
      <div class="size-8"><!-- w-8 h-8 --></div>
    </div>
  </div>
</div>

文字

<p class="text-sm text-gray-500 font-bold leading-relaxed tracking-tight"></p>
<p class="text-lg sm:text-xl lg:text-2xl"></p>
<p class="line-clamp-2 truncate"></p>
<p class="text-center underline uppercase"></p>

颜色

<div class="text-red-500 bg-blue-100 border-gray-200">
  <div class="text-white/80">
    <!-- 80% 透明度 -->
    <div class="bg-black/50"><!-- 半透明黑 --></div>
  </div>
</div>

边框与圆角

<div class="border border-gray-200 rounded-lg">
  <div class="border-2 border-dashed border-blue-500">
    <div class="rounded-full">
      <!-- 圆形 -->
      <div class="rounded-t-lg rounded-b-none"></div>
    </div>
  </div>
</div>

阴影与效果

<div class="shadow-sm shadow-md shadow-lg shadow-xl">
  <div class="opacity-50 blur-sm backdrop-blur-md">
    <div class="ring-2 ring-blue-500 ring-offset-2"></div>
  </div>
</div>

响应式

<!-- 移动优先 -->
<div class="text-sm sm:text-base md:text-lg lg:text-xl">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
    <div class="hidden md:block">
      <!-- 移动端隐藏 -->
      <div class="block md:hidden"><!-- 桌面端隐藏 --></div>
    </div>
  </div>
</div>

推荐使用习惯

• 布局类、间距类和文本类按固定顺序书写
• 常见按钮、卡片、标签尽早抽成快捷方式或组件
• 能用语义化封装时，不要把几十个类长期堆在模板里
• 任意值只在确实需要时使用，避免到处出现难维护的魔法数字

暗色模式

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  <div class="border-gray-200 dark:border-gray-700"></div>
</div>

过渡与动画

<div class="transition-all duration-200 ease-in-out">
  <div class="hover:scale-105 hover:shadow-lg">
    <div class="animate-spin animate-pulse animate-bounce"></div>
  </div>
</div>

状态变体

<button class="hover:bg-blue-600 active:bg-blue-700 focus:ring-2">
<div class="group">
  <span class="group-hover:text-blue-500">
</div>
<li class="first:mt-0 last:mb-0 odd:bg-gray-50">

UnoCSS 特有功能

Attributify 模式

<!-- 传统写法 -->
<div class="text-sm text-red-500 font-bold">
  <!-- Attributify -->
  <div text="sm red-500" font="bold"></div>
</div>

图标（preset-icons）

<span class="i-carbon-sun text-xl" /> <span class="i-mdi-github text-2xl" />

快捷方式

// uno.config.ts
export default defineConfig({
  shortcuts: {
    btn: "px-4 py-2 rounded-lg font-medium transition-colors",
    "btn-primary": "btn bg-blue-500 text-white hover:bg-blue-600",
  },
});

常见问题

类名越写越长，看不懂

通常说明该抽象了。可以优先：

• 抽 shortcuts
• 抽组件
• 把重复布局封装成局部模式

为什么样式有时不生效

优先检查：

• 扫描路径是否覆盖到目标文件
• 动态拼接类名是否能被正确识别
• 预设和插件是否启用
• 暗色模式和响应式前缀是否写对

什么时候不用原子类

当你需要：

• 复杂交互状态
• 大段复用样式
• 强语义组件边界

这时更适合抽组件或写局部样式，而不是无限往模板里堆类名。

延伸阅读

• CSS 技巧速查
• Nuxt / Vue 开发笔记
• 设计资源库

参考链接

• UnoCSS 文档 — 官方文档
• UnoCSS Playground — 在线试用
• Tailwind CSS 文档 — 官方文档
• Tailwind CSS Cheat Sheet — 速查表