你可能会说
我不想写一堆 CSS 文件了，有没有更快的方式加样式？
Tailwind CSS 是工具优先的 CSS 框架——直接在 HTML 中用预设类名（如 px-4、text-lg）组合出样式，无需写自定义 CSS。
一种「原子化」CSS 框架——不写 CSS 文件，直接在 HTML 标签上写 class 名来控制样式。如 `text-red-500` 就是红色文字。
生活类比
像点菜时直接说「少盐、多辣、不要葱」——每个选项是一个 class，组合起来就是你要的味道。
🎮 动手试试
👇 切换 Tailwind 工具类，实时预览组合效果
Tailwind 中 md:flex 表示什么？
你可以这样告诉 AI
帮我用 Tailwind 写一个卡片组件：圆角 xl、阴影 md、内边距 6、hover 上浮、深色模式适配。
Bootstrap 给现成组件（.btn .card），Tailwind 给原子工具类让你自由组合。
CSS Modules 还是写传统 CSS（只是作用域隔离），Tailwind 根本不写 CSS 文件。
快速原型
不想纠结命名、快速出效果的项目
设计系统
用 Tailwind 的约束（间距、色板）保持设计一致性
复杂动画
多步骤关键帧动画还是需要写自定义 CSS 或用动画库
团队不熟悉
如果团队习惯传统 CSS，强推 Tailwind 反而降低效率
每个类只做一件事：p-4 = padding: 1rem
md:flex = 在中等屏幕以上使用 flex
hover:bg-blue-500 = 鼠标悬停时变色
自定义颜色、字体、间距等设计令牌
CSS-first 配置，更快的引擎，原生 CSS 层叠层
类似 Tailwind 但更灵活，支持自定义预设和图标