什么是Tailwind CSS？面向应用搭建者的通俗指南

Tailwind CSS是一套用于设置网站样式的工具。你无需把样式规则写在单独的文件中，而是为每个元素添加简短的现成类名，例如bg-white表示白色背景，p-4表示内边距，text-lg表示较大的文字，rounded-xl表示圆角。Tailwind会生成浏览器所需的CSS。它是免费的开源软件，也是现代Web应用最常用的样式方式之一。

用AI搭建时，Tailwind为什么重要

如果你使用AI应用搭建工具来构建Web应用，你的应用很可能使用Tailwind设置样式。例如，除非你另有要求，Mythex的新项目默认使用Vite + React + TypeScript + Tailwind（技术选型方式）。

这对你有三方面的影响：

• 修改设计很省事。 由于样式就放在每个按钮、卡片和标题旁边，AI只需在一处修改几个类名，就能响应“让卡片不那么拥挤”这样的要求。
• 你看得懂。 Tailwind的类名接近平实的英语。text-center font-bold text-2xl并不难理解，即使你从未写过代码。
• 外观保持一致。 Tailwind提供一套固定的尺寸、间距和颜色体系，这样应用就不会出现14种略有差异的灰色。

一个日常类比

可以把它想象成刷墙装修。

普通CSS就像为每面墙自己调配油漆。你拥有完全的自由，但过一段时间，客厅是“暖白色”，走廊是“稍微再暖一点的白色”，而且没人记得为什么。

Tailwind则像油漆店的色卡加上一套带标签的贴纸。每面墙都贴上一张贴纸，写着“白色、哑光、刷两遍”，而色卡上只提供精选的几种色调。你的自由度会有所减少，但工地上的每个人只要读一读贴纸，就知道每面墙应该是什么样子。

Tailwind的工作原理

网页由HTML（内容和结构）和CSS（外观）构成。通常，CSS写在单独的文件中，规则如下：

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

使用Tailwind时，你无需编写这条规则，而是直接在元素上添加实用类（utility class）：

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

每个类只负责一项小的功能。应用构建时，Tailwind会扫描你的文件，找出实际使用的类，并只生成这些类所需的CSS，从而让最终的样式表保持较小的体积。

Tailwind当前的主版本是第4版，配置非常简单：安装它，把其插件添加到构建工具中，然后在CSS文件顶部写入@import "tailwindcss";。品牌颜色和字体等自定义内容，是用CSS中的设计令牌（design tokens）来定义的，而不是像旧版本那样写在一个庞大的JavaScript配置文件中。如果你读到提及tailwind.config.js的旧教程，原因就在这里。

实例：一张定价卡片

假设你要求AI搭建一个定价页面，并希望“Pro”卡片更醒目。该卡片的代码可能如下（在React组件中，class要写成className）：

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

从左到右阅读：

如果你提出“让Pro卡片用蓝色边框和柔和阴影来凸显”，AI可能会把border-gray-200改为border-2 border-blue-600，并添加shadow-lg。整个改动就是这些。

响应式设计与深色模式

Tailwind为屏幕尺寸和状态提供了简短的前缀：

• md:grid-cols-3：在中等及更大的屏幕上显示三列；在手机上则采用默认的单列。Tailwind遵循移动优先原则：不带前缀的类适用于所有屏幕，前缀则为更大的屏幕添加改动。
• hover:bg-gray-700：鼠标悬停时按钮变暗。
• dark:bg-gray-900：开启深色模式时使用不同的背景。

因此，在Tailwind项目中，要求实现移动端自适应布局或深色模式通常很快。

关键术语

常见误解

• “Tailwind就是一种设计。” 并不是。Tailwind提供的是构建模块，而不是外观。两个使用Tailwind的网站可以完全不同。所谓通用的“AI应用外观”来自默认设置，而不是Tailwind本身。请给你的搭建工具明确的设计方向。参见如何用AI设计好看的应用。
• “它和内联样式一样。” 并不完全如此。类名来自统一的尺度体系，支持悬停、深色模式和断点，并在构建时转换为普通CSS。
• “Tailwind会让页面变臃肿。” 构建过程只包含你使用的类，因此发送给访客的CSS通常很小。
• “类名很长意味着代码很乱。” 一开始看起来可能比较杂乱，但一个元素的全部外观都集中在一处。重复的样式通常会被抽取成组件，例如一个统一的Button。
• “使用Tailwind就不能写自定义CSS。” 你仍然可以在需要时编写普通CSS。

向你的AI搭建工具提出什么要求

• “把品牌颜色和字体一次性定义为主题令牌，并在各处使用，而不是硬编码颜色。”
• “让每张卡片、每个按钮和每个输入框都使用相同的圆角和间距。”
• “在手机宽度下检查布局，修复任何溢出或点击区域过小的问题。”
• “使用Tailwind的dark:变体添加深色模式，并确保文字对比度保持清晰易读。”
• “把重复的按钮样式抽取成一个可复用的Button组件。”
• “用平实的语言解释这一部分中的Tailwind类。”

Mythex中的Tailwind

新的Mythex项目默认使用Tailwind，并搭配React和TypeScript，因此你可以用平实的语言提出视觉修改要求，并在实时预览中看到结果。如果你想查看代码，代码编辑器会显示每个类（免费版为只读，Pro版可编辑）。如果你更喜欢普通CSS或其他配置，请在第一条提示中说明。文档解释了技术栈的选择方式。

常见问题