为什么我不再手写 CSS，而是全面拥抱 Tailwind

实战对比：一张卡片的两种写法

来看看同一个用户卡片组件，用传统 CSS 和 Tailwind 分别怎么写。点击标签切换查看代码和效果：

<!-- 只需 1 个文件，0 行自定义 CSS -->
<div class="flex items-center gap-4
  p-4 rounded-xl
  bg-white shadow-md
  hover:shadow-lg transition">
  <img class="w-12 h-12 rounded-full
    ring-2 ring-blue-100"
    src="avatar.jpg" />
  <div>
    <h3 class="font-semibold
      text-gray-900">张三</h3>
    <p class="text-sm
      text-gray-500">前端开发</p>
  </div>
  <span class="ml-auto text-xs px-2.5
    py-1 rounded-full
    bg-green-50 text-green-600">
    在线
  </span>
</div>

设计约束：再也不纠结间距了

Tailwind 最容易被忽略的核心价值是它提供的设计约束系统。不再纠结 padding 是 10px 还是 12px，直接从预设的间距系统中选择。点击下方的数值感受一下：

响应式布局：一行搞定三种屏幕

传统 CSS 写响应式需要一堆 @media 查询。Tailwind 只需要加个前缀，拖动下方滑块感受一下：

<div class="grid
  grid-cols-1
  md:grid-cols-2
  lg:grid-cols-3
  gap-4">

.grid { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .grid { grid-template-columns:
    repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns:
    repeat(3, 1fr); }
}

状态变体：hover、focus、active 一气呵成

传统 CSS 需要为每个状态单独写选择器。Tailwind 用前缀直接声明。把鼠标移到下方按钮上试试：

.btn { background: #3b82f6; transition: all 0.2s; }
.btn:hover { background: #2563eb; }
.btn:active { background: #1d4ed8; transform: scale(0.95); }
.btn:focus { outline: none; box-shadow: 0 0 0 2px #93c5fd; }
.btn .icon { transition: transform 0.2s; }
.btn:hover .icon { transform: translateX(4px); }

暗色模式：一个前缀就搞定

不需要维护两套 CSS 变量，不需要写复杂的选择器。只需要 dark: 前缀，点击切换感受一下：

<div class="bg-white dark:bg-gray-800">
  <h3 class="text-gray-900 dark:text-white">标题</h3>
  <p class="text-gray-600 dark:text-gray-300">内容</p>
</div>

常用组件速览：全部用 Tailwind 完成

下面这些组件全部用纯 Tailwind 类实现，没有一行自定义 CSS。这就是我说的「不用切文件」的快感：

Tailwind CSS v4：不仅是快，更是进化

v4 的 Oxide 引擎用 Rust 重写，构建速度快到离谱。更重要的是它拥抱了原生 CSS 的最新特性：

@theme {
  --color-neon-pink: oklch(0.5 0.3 340);
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
}

<div class="perspective-1000">
  <div class="transform-3d rotate-x-12 rotate-y-24
    hover:rotate-x-0 hover:rotate-y-0 transition-transform">
    <!-- 3D 卡片内容 -->
  </div>
</div>

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- 当父容器宽度 >= md 时，变为水平排列 -->
  </div>
</div>

CSS 产物体积：用多少打包多少

Tailwind 只会把你实际使用的类打包进最终产物。和传统 CSS 框架动辄几百 KB 的体积相比，差距是惊人的：

你可能会有的疑问

速查对照表

常见 CSS 属性和 Tailwind 类的对应关系，帮你快速上手：