Tailwind CSS 适合敏捷开发，因其将样式决策集中于 HTML 类名和 tailwind.config.js，改颜色只需更新配置一行、新增响应式按钮一行代码搞定、CSS 体积按需生成不随页面数增长，改样式确定性强、无隐式耦合。
Tailwind CSS 适合敏捷开发项目，核心在于它把样式决策从「写 CSS 文件」转移到「写 HTML 类名」，且所有变更都集中在 tailwind.config.js 和模板中，无需跨文件跳转、不依赖命名约定、不产生隐式耦合。
为什么改一个颜色不用搜遍整个代码库
在 Bootstrap 或手写 CSS 的项目里，主题色可能散落在 SCSS 变量、CSS 自定义属性、JS 字符串甚至内联 style 中。改个主色要 grep 全局、验证覆盖、担心漏掉某处 btn-primary 的变体。
Tailwind 把所有设计令牌（颜色、间距、字体大小等）收口到 tailwind.config.js 的 theme.extend.colors 和 theme.extend.spacing 里。改主色只需改一行：
colors: {
primary: '#165DFF', // ← 这里改
}
所有用到 bg-primary、text-primary、border-primary 的地方自动生效。没有遗漏风险，也不需要额外的构建步骤。
- 不改配置也能临时用：比如
bg-[#165DFF]或text-[#165DFF]，括号语法直接绕过配置，适合 A/B 测试或临时样式 - 如果用了
@apply封装组件类（如.btn），那也要同步更新该封装——但这类封装本就不该大量存在，敏捷项目更倾向原子组合而非抽象复用 - 误删
theme.extend里的某项，不会报错，只是对应类名失效；而 Bootstrap 里删一个 SCSS 变量，可能让整个_buttons.scss编译失败
为什么新增一个响应式按钮不用动三处文件
传统流程：HTML 加 class → CSS 写媒体查询 → JS 补交互逻辑（比如移动端点击反馈）。Tailwind 一行搞定：
<button class="px-4 py-2 rounded bg-blue-500 text-white md:px-6 md:py-3 hover:bg-blue-600 active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-blue-500">提交</button>
这里同时包含了：基础尺寸、断点适配、悬停态、激活态、键盘聚焦反馈——全部在 HTML 属性里声明，无 JS 依赖，无额外 CSS 文件。
-
md:px-6不是“只在 md 断点生效”，而是“在 md 及以上断点应用该 padding”，底层是标准媒体查询，完全可预测 - 如果团队约定禁用某些变体（比如不用
active:），就在tailwind.config.js的variants里关掉，而不是靠 Code Review 记忆 - 常见错误：把
sm:hover:bg-red-500当成“小屏下 hover 才生效”，其实它是“小屏及以上才启用 hover 变体”，hover 行为本身仍需鼠标悬停触发
为什么上线前 CSS 体积几乎不随页面数线性增长
Bootstrap 默认打包全部组件，哪怕你只用了 btn 和 container，bootstrap.css 仍含 modal、carousel、tooltip 等未用代码，压缩后约 150KB。Tailwind 在 JIT 模式下，只生成你在 content 字段里实际写过的类名。
关键配置项是 content，必须精确覆盖所有模板路径：
- 漏写
./src/**/*.{js,ts,jsx,tsx}→ 新增的 React 组件里写的flex-col不生效 - 错写成
["./public/**/*.html"]→ TypeScript 文件里的类名全被 PurgeCSS 删掉 - 用 Vite + React？确保
content包含.tsx；用 Svelte？得加.svelte；否则构建时直接丢样式
结果是：10 个页面和 100 个页面，最终 CSS 文件大小差异往往不到 2KB —— 因为 Tailwind 不是“加载框架”，而是“按需编译你的意图”。
真正容易被忽略的点是：Tailwind 的效率优势不是来自“写得少”，而是来自“改得确定”。当产品说“所有卡片圆角从 rounded-lg 改成 rounded-xl”，你全局替换即可，不用判断哪个 card 是自定义组件、哪个是第三方库、哪个用了 !important 覆盖。这种确定性，在需求高频变动的敏捷项目里，比节省几行代码重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
