Tailwind CSS 是一个 CSS 框架

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在 HTML 标记语言中组合起来，构建出任何交互设计。

开始使用

npm install tailwindcss

简单示例

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

效果

传统的 “语义化类名” 是 CSS 难以维护的原因。通常在您的样式表中堆满任意的CSS属性值。

tailwindcss 之所以被越来越多的人喜欢可不仅仅是它的精心设计的内置样式，而是它支持自定义的样式配置，支持你扩展原来的样式表，从调色板，到间距，到阴影等，你都可以自己去定义，这对于要求高度还原设计的网站。

可以说随着项目的发展，总是会或多或少遗留一些未使用过的 css 样式，随着时间的积累，它们会越来越大，导致加载速度变慢，导致维护起来也变得困难，不过这些在使用 tailwindcss 的时候完全不存在，tailwindcss 会自动删除未使用的样式，通过处理器删除未使用的 css 之后，大部分的 css 都会变得非常小。

TailwindCSS取代了语义式的css，使用了一种更高效的方式，会使得app更快成型。

官方文档：https://www.tailwindcss.cn/