Tailwind CSS 基础概念

要高效地使用 Tailwind CSS，理解其背后的几个核心概念至关重要。本章将介绍功能优先、响应式设计和状态变体等基础知识。

功能优先 (Utility-First)

这是 Tailwind 的基石。每一个类名都直接映射到一个或几个 CSS 属性。例如：

• text-lg -> font-size: 1.125rem;
• bg-blue-500 -> background-color: #3b82f6;
• flex -> display: flex;
• rounded-full -> border-radius: 9999px;

通过组合这些原子化的类，你可以构建出任何复杂的界面。这种方法的优势在于，你可以在一个地方（HTML）完成所有的样式工作，而无需在多个文件之间来回切换。

响应式设计 (Responsive Design)

Tailwind 采用移动优先 (Mobile First) 的策略。这意味着未加任何前缀的功能类（如 uppercase）在所有屏幕尺寸下都生效，而带有前缀的类（如 md:uppercase）仅在指定断点及以上尺寸生效。

Tailwind 内置了几个默认的断点：

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

示例：

<img class="w-16 md:w-32 lg:w-48" src="...">

这段代码的含义是：

• 默认情况下（在 sm 断点以下），图片的宽度是 w-16 (4rem)。
• 从中等屏幕尺寸开始（md，768px 及以上），宽度变为 w-32 (8rem)。
• 从大屏幕尺寸开始（lg，1024px 及以上），宽度变为 w-48 (12rem)。

状态变体 (State Variants)

Tailwind 允许你使用状态前缀来为不同状态（如 hover, focus, active）应用不同的功能类。

示例：

<button class="bg-sky-500 hover:bg-sky-700 ...">
  Save Changes
</button>

这个按钮在默认状态下背景色是 bg-sky-500，当鼠标悬停 (hover) 在上面时，背景色会变为 bg-sky-700。

常见的状态变体包括：

• 伪类: hover, focus, active, disabled, visited, first, last, odd, even 等。
• 伪元素: before, after, placeholder, file 等。
• 媒体查询: dark (用于深色模式), print 等。

JIT 引擎 (Just-in-Time)

从 Tailwind CSS v3 开始，JIT (即时编译) 引擎成为默认。这意味着 Tailwind 会在你的项目构建时，扫描你所有的 HTML、JavaScript 和模板文件，然后只生成你实际用到的那些 CSS 类。

这带来了几个巨大的好处：

• 极快的编译速度：无论你使用多少功能类，编译时间都保持在毫秒级。
• 所有变体开箱即用：你不再需要在配置文件中手动启用 hover, focus 等变体。
• 任意值支持：你可以使用方括号语法来创建临时的、任意值的功能类，例如 top-[117px] 或 w-[50%]。

理解这些核心概念，你就可以开始使用 Tailwind CSS 构建美观、响应式的界面了。