只需 HTML 即可快速构建现代网站

一个工具优先的 CSS 框架，包含 flex, pt-4, text-center 和 rotate-90 等类，可以直接在你的标记中构建任何设计。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 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-medium">
        “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-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

“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.”

Sarah Dayan

Staff Engineer, Algolia

基于约束

用于你的设计系统的 API。

工具类帮助你在系统的约束下工作，而不是在样式表中乱放任意值。它们使与颜色选择、间距、排版、阴影以及构成精心设计的设计系统的所有其他内容保持一致变得容易。

性能

它很小 — 永远不要再交付未使用的 CSS。

Tailwind 在为生产环境构建时会自动删除所有未使用的 CSS，这意味着你的最终 CSS 包可能是最小的。事实上，大多数 Tailwind 项目向客户交付的 CSS 不到 10kB。

状态变量

悬停和聚焦状态？我们解决它们。

想在悬停时设置样式吗？将 hover: 贴在你要添加的类的开头。适用于 focus、 active、disabled、 focus-within、focus-visible，甚至是我们自己发明的奇特状态，例如 group-hover。

组件驱动

担心冗余？不需要。

如果你一遍又一遍地重复相同的工具，你所要做的就是将它们提取到一个组件或模板中，部分和全部 — 你拥有单一数据源，因此你可以在一个地方进行更改。

夜间模式

现在有了夜间模式。

不想成为那些凌晨 2 点在手机上打开时让人们失明的网站之一？在配置文件中启用夜间模式，然后将 dark: 放在任何颜色工具前面，以便在夜间模式处于激活状态时应用它。适用于背景颜色、文本颜色、边框颜色，甚至渐变。

定制化

扩展它，调整它，改变它。

Tailwind 包括一组经过专业设计的开箱即用的默认设置，但实际上一切都可以自定义 — 从调色板到间距比例再到框阴影再到鼠标光标。

使用 tailwind.config.js 文件制作你自己的设计系统，然后让 Tailwind 将其转换为你自己的自定义 CSS 框架。

现代特性

前沿是我们的舒适区。

Tailwind 毫无疑问是现代的，它利用了所有最新和最强大的 CSS 特性，使开发人员体验尽可能愉快。

我们拥有一流的 CSS 网格支持、由 CSS 变量提供支持的可组合转换和渐变、对现代状态选择器（例如：:focus-visible）的支持等等。

编辑器工具

世界级的 IDE 集成。

担心记不住所有这些类名？适用于 VS Code 的 Tailwind CSS IntelliSense 扩展已涵盖。

获得智能自动补齐建议、代码检查、类定义等，所有这些都在你的编辑器中，无需配置。