CSS 框架

CSS框架主要有两种类型。

• 一种是基于组件的框架，包括 Bootstrap、Foundation 和 Bulma 等。
• 另一种是基于实用工具类的框架，包括 Tachyons、Tailwind CSS 和 Windi CSS 等。

如果你还不清楚组件类和实用工具类之间的区别，请参阅下方的【什么是实用工具类？】部分，然后继续阅读。

1<button class="btn btn-success">成功</button>

这里的 btn 和 btn-success 就是组件类，它们各自代表一组预定义的 CSS 样式设置。

在 Tailwind 中，我们通过使用实用工具类来创建按钮。

1<button class="py-2 px-4 bg-green-500 text-white font-semibold 
2        rounded-lg shadow-md hover:bg-green-700 focus:outline-none 
3        focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"> 
4        成功 
5</button>

这里的 py-2、px-4、bg-green-500 等都是实用工具类，每个类仅对应一个具体的 CSS 属性设置。要创建一个按钮，我们需要组合多个实用工具类——就像拼图一样，将它们组合起来形成完整的样式效果。

点击“运行”按钮，查看 Tailwind 和 Bootstrap 创建按钮的差异。

注意：可通过点击 URL 并切换到输出标签页查看结果。

虽然两个按钮外观相似，但它们的实现方式完全不同。

我们已经介绍了组件类与实用工具类的基本区别，接下来深入探讨实用工具类。

字体样式

在 Tailwind 中，CSS 的 font-style: italic 由 italic 实用工具类表示。

以下是一些其他示例：

• text-align: right 变为 text-right
• font-weight: 700 变为 font-bold
• border-radius: 0.25rem 变为 rounded
• width: 0.5rem 变为 w-2
• padding: 1.5rem 变为 p-6

以下是实际应用示例：假设我们要让一段文字加粗并倾斜，用传统 CSS 写法如下：

1p {
2    font-weight: 700; 
3    font-style: italic;
4}

在 Tailwind 中，我们只需直接在 HTML 元素上添加 font-bold 和 italic 类即可：

1<p class="font-bold italic">Lorem ipsum...</p>

在 Tailwind 中，还可以根据元素状态（如悬停、聚焦等）应用类。例如，若希望上述段落仅在鼠标悬停时变为斜体，可以这样写：hover:italic。

可以看出，Tailwind 的实用工具类大多直观易懂。仅凭类名，我们通常就能想象出样式效果。尽管部分类名缩写较多，但只要掌握命名规律，并经过一些实践后，这些类名就很容易记忆和使用。