Tailwind CSS

它是什么？

传统的 CSS 写法是：先给 HTML 元素起一个类名，然后在 CSS 文件里为这个类名定义样式。Tailwind CSS 换了一种方式——它预定义了成百上千个功能性的小类名（如 p-4 表示内边距、text-blue-500 表示蓝色文字、rounded-lg 表示圆角），你直接在 HTML 标签上把需要的类名组合起来就行。

这就像画画：传统 CSS 是先调好一罐特定颜色的油漆再涂上去；Tailwind 是给你一盒颜料，让你在画布上自由搭配。

为什么 AI 几乎都用它？

你会发现 AI 生成的前端代码中，Tailwind CSS 的出现频率非常高。这是因为它的写法和 AI 的工作方式非常契合——所有样式信息都集中写在组件文件里，AI 不需要在 HTML 和 CSS 文件之间来回跳转。而且 Tailwind 的类名语义清晰（mt-4 就是 margin-top 4 个单位），阅读起来一目了然。

有什么需要注意的？

一开始看到满屏的类名可能会觉得混乱，但用几次之后你会发现它的规律很简单——p 开头的是内边距（padding）、m 开头的是外边距（margin）、text 开头的是文字相关的样式、bg 开头的是背景色。你不需要记住所有类名，AI 和编辑器插件会帮你补全。