层叠样式表（CSS） 使我们能够控制信息的显示，并通过视觉效果增强页面。借助 CSS，我们可以对网站上的基本文本和图像进行令人惊叹的处理；再加上一点客户端代码来添加和移除 CSS 类，我们能实现的效果呈指数级增长。然而，有时 CSS 也难以调试，编写起来复杂，难以掌控。

本课程将帮助我们应对这些复杂性。

引言

Tailwind CSS——一种实用优先的 CSS 框架，用于快速构建自定义设计——可以使我们网站的 CSS 更容易控制和调试。在本课程中，我们将深入探讨 Tailwind CSS 框架，了解其排版、页面布局、响应式设计等特性。

为什么选择 Tailwind？

Bootstrap 或类似的 CSS 框架提供命名描述其用途的 CSS 类，例如“button”、“card”或“nav”。这些类通常会一起定义多个 CSS 样式。

Tailwind 则不同。

几乎所有基础的 Tailwind 类都是单个 CSS 样式设置的轻量封装，例如使用 m-4 来实现 margin: 1rem，或使用 text-lg 将字体大小改为 font-size: 1.125rem。

例如，Bulma 框架中的按钮可能这样写：

1<button class="button">点击我</button>

但在 Tailwind 中，我们会使用类似以下的方式：

1<button class="bg-green-500 text-white font-bold
2  py-3 px-4 rounded-lg text-center">
3  点击我
4</button>

在 Tailwind 版本中，按钮的每一项样式——绿色背景、白色文字、粗体字、内边距、圆角、文字居中——都各自对应一个类名，出现在类列表中。

刚开始可能会不习惯在 HTML 标记中看到这么多小类名。试过之后，看看你的感受如何。

Tailwind 代码极为明确

Tailwind 代码极为明确，仅通过查看 HTML 标记就能理解显示效果。它与 Stimulus 框架“将大量 JavaScript 关系置于标记中”的设计理念非常契合。如果我们希望将这一组类打包以供复用，Tailwind 提供了 @apply 指令，可用于基于 Tailwind 实用程序构建新的 CSS 类；或者我们也可以利用网页编程语言和框架的功能来管理重复代码。

Tailwind 设置的一个优势是，原型设计、迭代和自定义显示变得非常简单。例如，若要更改按钮的水平内边距，只需将 px-4 改为 px-6。我们无需猜测变更的影响范围，也不必担心页面其他部分是否会受到影响。可以持续进行微小调整，直到显示效果完全满意。我们不再需要不断为可能不会被复用的 CSS 属性组合起名字。

另一个优势是，Tailwind 提供了一组前缀，允许我们在特定情况下指定行为。例如，我们可以添加类名 hover:bg-blue-500，其中 hover 前缀会在用户悬停时应用该类并改变背景颜色。Tailwind 还提供一组前缀，可在不同屏幕尺寸下指定不同的行为。这些前缀正是使用像 bg-blue-500 这样的 Tailwind 类优于直接使用文档对象模型（DOM）样式属性的原因之一，例如 style="background-color: #cdcdcd"。

结论

使用 Tailwind 时，所需的 CSS 代码量更少，大部分设计来自 Tailwind 实用程序的组合。这意味着我们花更少时间命名 CSS 和管理全局 CSS，从而能将更多精力投入到实际的页面展示上。Tailwind 让增量修改变得轻松，能立即看到结果，并清楚理解变更的影响范围。这些特性使其在新网站原型设计时尤为有用。