Tailwind CSS 4 入门：安装、主题与响应式

Tailwind CSS 通过扫描模板中的 class 名生成静态 CSS。它适合需要快速组合一致设计约束的组件项目，但不会替你决定语义、组件边界和可访问性。本文以 Tailwind CSS 4 的 CLI 用法为基础，旧版 @tailwind base 配置教程不能直接照搬。

目录

• 使用 CLI 安装
• Utility-first 示例
• 响应式与状态变体
• 主题变量
• 不要动态拼接不完整类名
• 什么时候抽取组件
• 常见问题
• 参考资料

使用 CLI 安装

npm install tailwindcss @tailwindcss/cli

在入口 CSS 中导入：

@import "tailwindcss";

启动构建：

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Vite、Next.js 等框架应优先使用 Tailwind 官方对应集成指南，不要把 CLI 命令生搬到所有项目。

Utility-first 示例

<article class="rounded-xl border border-zinc-800 bg-zinc-950 p-6 text-zinc-100 shadow-lg">
  <h2 class="text-xl font-semibold tracking-tight">FreeMac</h2>
  <p class="mt-2 text-sm leading-6 text-zinc-400">
    为 Windows 转 Mac 用户整理免费软件和迁移指南。
  </p>
</article>

class 很多并不自动等于不可维护。判断标准是组件是否有清晰职责、重复是否被正确抽取、设计值是否一致，而不是单纯统计 class 数量。

响应式与状态变体

<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
  <!-- cards -->
</div>

<button class="bg-amber-600 hover:bg-amber-500 focus-visible:outline-2 disabled:opacity-50">
  保存
</button>

默认样式作用于所有尺寸，再通过 md:、xl: 等覆盖，属于移动优先。交互样式不能只写 hover:，还要考虑键盘焦点、disabled 和触屏设备。

主题变量

Tailwind 4 可以在 CSS 中定义主题变量：

@import "tailwindcss";

@theme {
  --color-brand-500: oklch(0.72 0.12 75);
  --font-display: "Noto Serif SC", serif;
}

随后使用：

<h1 class="font-display text-brand-500">Mac for Free Minds</h1>

项目已有 CSS variables 时，不必为了 Tailwind 重建整套设计系统；可以明确哪些 token 属于产品主题，哪些只是局部样式。

不要动态拼接不完整类名

扫描器需要在源文件中看到完整 class 字符串：

// 不推荐：扫描器不一定能识别拼接结果
const className = `text-${color}-600`

// 推荐：完整映射
const colors = {
  red: "text-red-600",
  green: "text-green-600",
}

来自 CMS 或用户输入的任意 class 也不应直接信任。除了无法稳定生成 CSS，还可能造成不可控界面或安全问题。

什么时候抽取组件

重复按钮不要通过复制长字符串维护：

type ButtonProps = {
  children: React.ReactNode
  tone?: "primary" | "quiet"
}

const tones = {
  primary: "bg-amber-600 text-white hover:bg-amber-500",
  quiet: "bg-zinc-800 text-zinc-100 hover:bg-zinc-700",
}

export function Button({ children, tone = "primary" }: ButtonProps) {
  return (
    <button className={`rounded-md px-4 py-2 font-medium ${tones[tone]}`}>
      {children}
    </button>
  )
}

真正复用行为和语义时抽 React 组件；只在 CSS 中重复一组稳定 utility 时，再评估自定义 class 或组件层。不要给每个普通组合都使用 @apply，否则会重新创造难追踪的 CSS 抽象。

常见问题

• 样式没有生成：确认源文件路径、类名是否完整出现，以及构建进程是否读取到文件。
• 旧教程配置不生效：先确认 Tailwind 主版本，v3 和 v4 的安装与配置方式不同。
• class 冲突：避免调用方随意覆盖组件内部同类 utility，必要时明确合并规则。
• 生产 CSS 过大：检查是否引入不受控来源、错误扫描范围或额外 CSS 包。
• 页面仍不一致：建立主题 token 和组件规范，Tailwind 本身不会自动形成设计系统。

间距比例的选择可参考 Tailwind spacing 详解，React 抽象边界见 React 组件设计指南。

参考资料

• Tailwind CSS 官方安装
• Tailwind CSS 响应式设计
• Tailwind CSS 主题变量