Tailwind CSS
Tailwind CSS 是一种以工具类为主的 CSS 框架，让你直接在页面元素的类名中组合布局、间距和颜色等样式。做后台页面时，它能减少反复命名和编写零散 CSS 的工作，同时让样式变化更容易从页面代码中看出来。
你可能会说：「我想直接在页面代码里调整间距和颜色，少写一堆单独的 CSS 类。」
读之前建议先了解
动手看看报表后台的创建按钮
切换背景色和文字色，对照按钮与下方类名；再悬停、按住按钮或用 Tab 聚焦。这块沙盒用等效 CSS 演示工具类组合，不依赖实际加载 Tailwind。
bg-indigo-600 负责背景，text-white 负责文字；布局、间距和圆角由其他工具类负责。换颜色不必重新给按钮起一个样式名称。
要点Tailwind CSS 怎么帮你写页面？
- 1
用小类名组合页面样式
你可以给一张订单卡片组合间距、背景色、圆角等类名，而不是先为它起一个专用类名，再去另一份文件里找样式。每个类通常只负责一小部分效果，组合起来才是完整外观。
- 2
按页面代码生成所需样式
Tailwind 会在构建时查找项目代码中使用的类名，生成对应的 CSS。所以让 AI Agent 拼接运行时才确定的类名时，要特别核对生成结果；框架没找到的类名，页面上就可能没有预期样式。
- 3
让重复设计有统一来源
如果后台里的按钮和卡片总用同一套颜色、间距，我们可以集中定义这些设计取值，再在各处复用。这样改品牌色时，不用逐页找颜色值；重复出现的界面结构也可以进一步封装成组件。
容易混淆的地方
Tailwind CSS 没有取代 CSS：浏览器最终仍靠 CSS 呈现页面，你也可以继续写自定义样式。它也不是现成的按钮或弹窗组件库；工具类主要帮你控制外观，组件的结构、状态和交互仍要自己实现，或交给组件库。
什么时候用
适合用
- 做需要频繁调整的 SaaS 后台，让 AI Agent 快速修改卡片、表格周围的间距和响应式布局。
- 团队已有一套颜色和间距规则，想让新页面复用这些取值，减少各处手写样式的差异。
- 开发多个相似页面时，想在页面代码里直接看出主要样式，再把重复结构提取为组件。
不适合用
- 只维护一张内容简单的静态页面，且现有 CSS 已经清楚；继续使用原有 CSS 比引入新工具省事。
- 需要开箱即用、带完整交互和无障碍处理的复杂控件；选合适的组件库，Tailwind 本身不提供这些行为。
- 只是想改一段第三方嵌入内容的样式，却无法修改它的元素类名；先查看该内容支持的样式接口或使用可控的 CSS 覆盖。
练一练选一个答案，看看解释
你让 AI Agent 做一个订单后台。页面已有 Tailwind，接下来要统一卡片间距，并加入能打开、关闭的详情弹窗。哪种安排最合理？
让 AI 帮你做复制给 AI Agent 直接用
请在现有 Tailwind CSS 项目中调整订单后台：统一卡片的间距和圆角，让窄屏下卡片改为单列。优先复用项目已有的设计取值和组件；详情弹窗的开关交互单独实现，不要以为添加样式类就能完成。请说明改动位置。