Tailwind CSS 实用技巧：加速 UI 开发

Designer working on UI components

Tailwind CSS 从根本上改变了开发者编写样式的方式。你不再需要在 HTML 和 CSS 文件之间来回切换、绞尽脑汁为 class 命名，而是直接在标记中组合工具类。当你掌握了相关模式后，其结果是更快的迭代速度、生产环境零冗余 CSS，以及一致的设计系统。

工具优先的思维方式

在深入技巧之前，先理解其核心理念：每个 class 只做一件事。与其这样写：

.card {
  background-color: white;
  border-radius: 8px;
  padding: 16px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

不如这样写：

<div class="bg-white rounded-lg px-6 py-4 shadow-sm">

样式与结构并排存放，无需频繁切换上下文，也无需为命名争论不休。

响应式设计：移动优先的断点

Tailwind 采用移动优先策略。无前缀的工具类适用于所有屏幕尺寸；带前缀的工具类则在该断点及以上的屏幕尺寸生效：

<!-- 移动端全宽，中等屏幕半宽，大屏幕三分之一宽 -->
<div class="w-full md:w-1/2 lg:w-1/3">

<!-- 移动端垂直排列，中等屏幕及以上水平排列 -->
<div class="flex flex-col md:flex-row gap-4">

<!-- 移动端隐藏，大屏幕及以上显示 -->
<aside class="hidden lg:block">

默认断点：

前缀	最小宽度
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px
`2xl:`	1536px

暗色模式

在 tailwind.config.ts 中启用暗色模式：

export default {
  darkMode: "class", // 或 "media"
  // ...
}

使用 "class" 模式时，当用户切换暗色模式时，需为 <html> 添加 dark class。使用 "media" 模式时，则自动跟随操作系统的偏好设置。

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h1 class="text-2xl font-bold">Hello World</h1>
  <p class="text-gray-600 dark:text-gray-400">辅助文本</p>
</div>

使用 `@apply` 提取组件

当某个模式反复出现时，可以将其提取出来——但要适度使用：

/* globals.css */
@layer components {
  .btn-primary {
    @apply inline-flex items-center px-4 py-2 rounded-md
           bg-blue-600 text-white font-medium text-sm
           hover:bg-blue-700 focus:outline-none focus:ring-2
           focus:ring-blue-500 focus:ring-offset-2
           transition-colors duration-150;
  }
}

仅在多处复用的 UI 组件中使用 @apply。对于一次性样式，直接保留内联工具类即可。过度使用 @apply 会重新引入 Tailwind 原本旨在解决的问题。

自定义设计令牌

在 tailwind.config.ts 中定义你的设计系统：

export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
      spacing: {
        18: "4.5rem",
        88: "22rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },
}

现在你可以使用 text-brand-500、font-mono、mt-18 等类名——在 VS Code 中均完整支持 IntelliSense。

将现有 CSS 转换为 Tailwind

正在迁移旧代码库？使用我们的 Tailwind Converter，粘贴 CSS 即可即时获得等效的 Tailwind 工具类。

/* 输入 CSS */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 4rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
}

→ flex items-center justify-between px-16 py-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl

任意值

需要使用默认比例尺之外的值？使用方括号：

<!-- 精确像素值 -->
<div class="w-[327px] mt-[13px]">

<!-- 任意颜色 -->
<div class="bg-[#1a2332] text-[#e8f4f8]">

<!-- 自定义 CSS 变量 -->
<div class="text-[var(--brand-color)]">

<!-- 复杂网格 -->
<div class="grid grid-cols-[1fr_2fr_1fr]">

请谨慎使用——如果同一个任意值在多处出现，建议将其添加到配置文件中。

状态变体

Tailwind 内置了你所需的所有状态变体：

<!-- 悬停、聚焦、激活 -->
<button class="bg-blue-600 hover:bg-blue-700 active:bg-blue-800 focus:ring-2">

<!-- 表单状态 -->
<input class="border-gray-300 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">

<!-- 组合悬停（父元素控制子元素） -->
<div class="group">
  <h3 class="text-gray-900 group-hover:text-blue-600">标题</h3>
  <p class="hidden group-hover:block">悬停父元素前隐藏</p>
</div>

<!-- Peer（兄弟元素状态） -->
<input type="checkbox" class="peer">
<label class="hidden peer-checked:block">已勾选！</label>

性能：清除未使用的样式

Tailwind 的 JIT（即时编译）编译器会扫描你的模板文件，仅生成你实际使用的 CSS 类。生产环境的 CSS 体积通常在 5–15 KB 之间。

确保 tailwind.config.ts 中的 content 路径覆盖了所有模板文件：

export default {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./content/**/*.mdx",
  ],
  // ...
}

如果你动态构造类名（例如 `bg-${color}-500`），Tailwind 将无法检测到它们。请使用 safelist 或完整的类名字符串代替：

// ❌ 动态拼接 —— Tailwind 无法检测 "bg-red-500"
const cls = `bg-${color}-500`;

// ✅ 完整类名字符串 —— 可被检测
const colorMap = { red: "bg-red-500", blue: "bg-blue-500" };

Typography 插件

@tailwindcss/typography 插件提供了一个 prose class，能为任意 HTML 内容添加美观的排版样式——非常适合博客文章、文档和 markdown 输出：

<article class="prose prose-lg dark:prose-invert max-w-none">
  <!-- 在此放置 markdown 渲染后的 HTML -->
</article>

它以合理的默认样式处理标题、列表、引用块、代码块、表格等内容。

快速优化清单

在 flex/grid 容器上使用 gap-*，而非在子元素上使用 margin
使用 space-x-* 和 space-y-* 为相邻兄弟元素添加间距
使用 divide-* 在子元素之间添加边框，无需额外标记
使用 ring-* 实现聚焦环（自定义样式时优于 outline-*）
使用 truncate 实现单行溢出省略号
使用 line-clamp-3 实现多行截断（需要 typography 插件）
使用 sr-only 在视觉上隐藏无障碍标签

Tailwind 值得深入投入。你对工具类词汇越熟练，就能越快地交付精美、一致的用户界面。