Bootstrap可通过CDN直接引入快速使用，Tailwind必须本地构建；前者适合原型开发，后者需PostCSS扫描源码按需生成CSS，且purge和JIT为必选项。
CDN 引入适合 Bootstrap，但 Tailwind 必须本地构建
Bootstrap 的 bootstrap.min.css 和 bootstrap.bundle.min.js 通过 CDN 直接引入就能跑起来，适合原型、静态页、学校作业；Tailwind 则完全不支持 CDN 方式生效——它依赖 PostCSS 扫描源码中实际用到的类名，动态生成 CSS。你如果在 HTML 里写 class="text-blue-600" 却没配好 tailwind.config.js 中的 content 数组，这个类根本不会出现在最终 CSS 文件里。
常见错误现象：hover:bg-blue-700 写了但悬停无反应 → 实际是 JIT 模式未启用，或 content 路径漏了 .html 后缀
- Bootstrap CDN 示例（无需构建）：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet"> - Tailwind 必须本地安装：
npm install -D tailwindcss postcss autoprefixer，再运行npx tailwindcss init -p -
tailwind.config.js中content字段必须显式声明模板路径，例如：["./src/**/*.{html,js,jsx,ts,tsx}"]，少一个后缀，对应类就丢失
按需引入时，Bootstrap 要删 JS 插件，Tailwind 要开 Purge
全量引入 Bootstrap 的 JS bundle（含 Popper、Modal、Dropdown 等）会带进约 40 KB gzip 后代码，但多数项目只用到 Grid 和 Utilities；Tailwind 默认编译出的 CSS 可能超 3 MB（未 purge），而生产环境应控制在 10–20 KB。
使用场景：内部后台只用栅格和表单，不弹模态框 → Bootstrap 的 JS 插件就是冗余；页面只有 3 个按钮、2 张卡片 → Tailwind 若没开 Purge，mt-1 到 mt-96 全在 CSS 里，白屏风险陡增
立即学习“前端免费学习笔记（深入）”；
- Bootstrap 按需：禁用 JS 插件，在 Sass 中只
@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/grid"; - Tailwind 按需：Purge 不是可选项，是必选项；
mode: "jit"已成标配，且content必须覆盖全部模板文件路径 - 二者都依赖构建流程：Bootstrap 的 Sass import 和 Tailwind 的 PostCSS 都无法绕过打包工具（Vite/Webpack）
自定义主题时，Bootstrap 改变量，Tailwind 改 config.theme
想把主色从蓝色换成青色？Bootstrap 要重写 $primary 变量并确保所有依赖它的组件（.btn-primary、.alert-primary）重新编译；Tailwind 只需在 tailwind.config.js 的 theme.extend.colors 里加一行 teal: "#0d9488"，然后全局搜替换 bg-blue-600 → bg-teal-600 即可。
容易踩的坑：Bootstrap 自定义后，.form-control:focus 的阴影颜色可能还卡在旧值上，因为某些样式没用变量引用；Tailwind 若没在 theme.extend.spacing 里补全 my-7 对应的 1.75rem，你就得硬写 my-[1.75rem]，初学者根本想不到方括号语法存在
- Bootstrap 主题定制路径：
variables.scss→custom.scss→ 编译入口main.scss - Tailwind 主题定制路径：直接改
tailwind.config.js的theme段，无需额外编译步骤 - 二者 dark mode 实现差异大：Bootstrap 需手动切
data-bs-theme="dark"或 JS 控制；Tailwind 用dark:bg-gray-800即可，前提是darkMode: "class"已设且根元素有darkclass
Vite / React / Vue 项目默认倾向 Tailwind
现代前端框架（Vite + React/Vue）的开发流天然适配 Tailwind：组件内联样式、JSX 中写 className、HMR 热更新快；Bootstrap 的 JS 插件与 React 的 DOM 控制权冲突（比如 Modal 打开后 React 不知道状态），得用 react-bootstrap 这类封装层才能安全协作。
性能影响：Vite 的 import 机制让 Bootstrap 的 Sass 模块化变得笨重；而 Tailwind 的 @layer components 可直接封装成可复用的类组合，和组件逻辑贴得更紧
- React 项目中用 Bootstrap：避免直接操作 DOM，优先选
react-bootstrap，否则useRef+componentDidMount一堆胶水代码 - Vue 项目中用 Tailwind：配合
v-bind动态 class 更自然，例如:class="['p-4', isHovered ? 'bg-indigo-500' : 'bg-white']" - 纯 HTML + JS 项目（如 searx 的模板）：Bootstrap 的 class 语义清晰（
.navbar、.card），比满屏flex flex-col gap-4 p-6 border rounded-lg更易维护
content 路径、跑通 JIT、调好第一个响应式断点，时间已经过去二十分钟——但它后面改圆角、换色、加动效，真的一行类名就搞定。 
