Tailwind CSS
Tailwind CSS
样式与 CSS也叫：Tailwind、原子化 CSS、工具类 CSS、TW
一句话：工具类优先的 CSS 框架，直接在 class 里写 flex、p-4、text-lg 这样的短类名来完成样式。
详细解释
传统写法是先起一个类名，再去 CSS 文件里写样式；Tailwind 提供大量现成的小类名，一个类只管一件事：p-4 是内边距 16px，text-gray-500 是灰色文字，rounded-lg 是 8px 圆角，md:grid-cols-3 是中等屏幕以上三列，hover:bg-gray-100 是悬停时背景变浅。
AI 编程工具生成前端代码时很常用 Tailwind，shadcn/ui 等流行组件库也基于它。看懂常用类名，就能直接改 AI 生成的样式，也能用类名精确沟通，比如「把 gap-2 改成 gap-4」。
颜色、间距、断点可以在主题配置里统一定义，相当于项目的设计令牌。v3 和 v4 的配置方式差别很大，让 AI 改配置前先确认项目用的版本。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
项目用 Tailwind CSS，请只用类名写样式，不新建 CSS 文件；颜色用主题里的 primary，不写 text-[#123] 这类任意值；卡片用 rounded-xl p-6 shadow-sm；移动端优先，用 md: 适配大屏。