Tailwind CSS 简介

欢迎来到 Tailwind CSS 教程！Tailwind CSS 是一个颠覆传统 CSS 开发模式的、“功能优先” (Utility-First) 的 CSS 框架。它提供了一系列高度可组合、低级别的功能类，让你可以直接在 HTML 中构建任何设计，而无需离开你的 HTML 文件。

什么是“功能优先”？

传统的 CSS 开发（例如使用 Bootstrap 或自定义 CSS）通常遵循“语义化”的原则。你会为你的组件创建一个类名（如 .card, .button），然后在 CSS 文件中为这个类定义样式。

<!-- 传统方式 -->
<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    /* ...更多样式... */
  }
  /* ...更多类的定义... */
</style>

而 Tailwind CSS 采取了不同的方法。它不提供预设的组件类，而是提供了一整套原子化的 CSS 类（功能类），每个类都只做一件事。例如，flex 用于 display: flex;，p-4 用于 padding: 1rem;，text-white 用于 color: white;。

<!-- Tailwind CSS 方式 -->
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

为什么选择 Tailwind CSS？

1. 不再为类名烦恼：你不需要再为了一个简单的 div 绞尽脑汁去想一个“语义化”的类名。
2. CSS 文件停止增长：由于所有样式都是通过复用现有的类来构建的，你的 CSS 文件大小会保持在一个可控的、极小的范围内。
3. 更安全的修改：CSS 是全局的，修改一个类的样式可能会影响到你意想不到的地方。而在 Tailwind 中，所有样式都是局部的，你可以放心地修改一个元素的类，而不用担心破坏其他东西。
4. 极高的可定制性：Tailwind 的一切都可以通过其配置文件 tailwind.config.js 进行定制，从颜色、间距到字体、阴影，你可以轻松打造出符合自己品牌风格的设计系统。

Tailwind CSS 鼓励你先用功能类快速构建出界面，然后当你发现有可复用的模式时，再将其提取为组件。这种工作流极大地提升了前端开发的效率和体验。