Tailwind 概览

Tailwind 似乎是对管理复杂网站 CSS 问题的一种反直觉的解决方案。Tailwind 由许多小型的实用程序 CSS 类名组成，其中大多数类名仅将一个特定的 CSS 属性设置为一个特定的值。在 Tailwind 中实现复杂行为的首选方式是将多个 CSS 类组合应用到 HTML 元素上。

这与多年来发展出的许多 CSS 命名规范背道而驰。许多 CSS 框架和命名约定建议使用反映页面元素语义含义的名称，例如 button、nav-bar 或 menu-item。

Tailwind 类名并非语义化。相反，它们都是实用程序类，意味着一个 Tailwind 类代表页面上的某个具体元素，比如 font-bold 用于文本格式化，或 m-6 用于边距。许多 CSS 框架也包含实用程序类，但认为语义化类名更为重要。使用 Tailwind 和实用程序类意味着大量重复，因为 Tailwind 的实用程序类经常在多个 DOM 元素上重复出现。

尽管可能存在重复，Tailwind 依然可以在大型项目中有效工作。

应用 Tailwind 类

当我们在一个特定位置应用类时，样式变化的性质以及该变化的作用范围都极为清晰。Tailwind 的简短类名起初可能看起来晦涩难懂，但其命名模式非常强大，阅读起来会越来越容易。此外，Tailwind 的前缀使我们在 HTML 中轻松定义特殊行为，例如 hover 状态以及在不同尺寸屏幕上的响应式行为。这些前缀也让从 HTML 本身就能清楚理解发生了什么。

由于 Tailwind 类可以无限组合，我们在 Tailwind 中编写的外部 CSS 代码远少于其他 CSS 样式方案。使用 Tailwind 时，我们不需要创建那么多自定义的 CSS 类。由于 Tailwind 的更改与 HTML 标记紧密关联，因此预测修改结果变得更加容易。

Tailwind 支持自定义 CSS

Tailwind 允许我们将一组 Tailwind 实用程序类提取出来，封装成具有更语义化名称的自定义 CSS 类。与其自行创建类，Tailwind 建议利用前端开发栈中已有的工具来减少重复。例如，与其为按钮样式单独创建一个 CSS 类，Tailwind 建议我们创建一个可复用的 React 组件，或 Rails 的局部视图（partial）或辅助方法，并且只在该可复用项中定义一次 CSS 样式。

Tailwind 由几个不同的部分组成，包括我们本课程大部分时间将专注于使用的实用程序类、重置样式表，以及让使用 Tailwind 更加便捷的函数。