Tailwind CSS 入门和实践

作者：康曾璐

背景

 Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架，提供了基础的工具类 utility classes（如：内边距 padding、字体 text 和 font、动画 transition 等预设类），能直接在脚本标记语言中组合起来，构建出您想要的设计。

目前主流的 UI 框架，如 Ant-design，则采用直接提供现成组件（如：按钮 buttin、表单 form 等组件）的方式。开发者可以使用框架提供的组件快速进行页面构建，但由于组件的样式一般是提前预设并且封装好的，若要定制样式，需要大量覆盖组件的内置样式。

Tailwind 没有提供现成的组件，而是提供各种通用的样式类。开发者可以直接在 HTML 的 Tag 添加各种基础的 class 为元素设置相应的 UI 样式，通过各种基础的 class 的「叠加组合」构建出所需的外观，高效地进行定制化的网站开发。换言之，在 TailwindCSS 中，有许多小类代表 CSS 声明。当创建组件时，只需要引用其中的一些小类就可以创建您需要的组件。

Semantic CSS | Atomic/Utility-First CSS

Semantic CSS

要制作一个 button 按钮的样式，我们一般会在 html 或者 jsx 结构中添加富有语义化的 class 类名，随后在 css 样式中写入对应类的样式。例如：制作一个 danger 样式的 Button 按钮。

  <div class="box">
    <button class="danger-button">Button</button>
  </div>

.danger-button {
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
  color: #fff;
  border-color: #ff4d4f;
  background: #ff4d4f;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
  box-shadow: 0 2px #0000000b;
}

以上是最常见、最常规的写法，被称作 Semantic CSS（语义化 CSS）规范。在这种规范下，追求关注点分离，让结构与样式各司其职，使结构更具语义化。但这样一来，也面临着许