tailwind在移动端更受欢迎，因其天然适配构建体积敏感、响应式迭代频繁、设计系统高度定制三大刚性约束；bootstrap组件预设模式在这三方面易受限。
Tailwind 在移动端项目中更受欢迎，不是因为它“更适合手机”，而是它天然适配现代移动端开发的三个刚性约束：构建体积敏感、响应式迭代频繁、设计系统高度定制。Bootstrap 的组件预设模式在这三方面都容易卡住。
tailwind.config.js 的 content 字段漏配，移动端样式直接失效
这是最常踩的坑：你在 src/components/Modal.tsx 里写了 md:hidden lg:block，但 tailwind.config.js 的 content 只写了 ["./public/**/*.html"] —— Tailwind 根本扫描不到 TSX 文件，所有类名都不生成，页面在手机上变成纯白或错位。Bootstrap 不会这样，它的 CSS 是全量打包，哪怕你只用一个 btn 类，bootstrap.css 也照常加载。
- 必须把移动端组件路径全部写进
content，例如["./src/**/*.{js,jsx,ts,tsx}"] - 若用 React Native Web 或 Expo，还要加
./app/**/*.{js,jsx,ts,tsx} - 漏掉任何一类文件（比如动态生成的
.astro或.svelte），对应断点类就无效
md:flex gap-4 这类组合类，在 Bootstrap 里得写三行媒体查询
移动端布局经常要“小屏竖排、中屏横排、大屏网格”，Tailwind 一行 flex flex-col md:flex-row md:gap-4 lg:grid lg:grid-cols-3 就搞定；Bootstrap 得靠 d-flex d-md-block 拆开控制显示，再手动补 gap 工具类（v5.3 才加，且不支持响应式 gap）。
- Tailwind 所有工具类默认支持断点前缀，
hover:、disabled:、focus-within:全部可叠加 - Bootstrap 的
gap、place-items、backdrop-blur等新属性要么没封装，要么需额外引入 utility classes 扩展包 - 遇到非标准间距（如
gap-[1.3rem]），Tailwind 方括号语法直接生效；Bootstrap 只能 inline style 或改 Sass 变量
构建后 CSS 体积差 10 倍，直接影响 LCP 和 3G 用户留存
一个典型移动端 H5 页面，Tailwind 生产 CSS 压缩后约 8–12KB；Bootstrap 完整版压缩后 25KB，且含大量未用代码（比如 carousel、tooltip 的 JS 逻辑和样式）。在印度、东南亚等 3G 主力网地区，这 15KB 差距会让首屏渲染延迟多出 400–700ms。
- Tailwind 的体积优势完全依赖
content正确 + JIT 启用，否则全量构建可达 2MB+ - Bootstrap 即便只 import
scss/bootstrap-grid.scss，仍要处理整个 Sass 依赖树，构建慢、体积难控 - Vite + Tailwind v4 的 Oxide 引擎增量构建仅需 ~5ms；Bootstrap 的 Sass 编译每次改变量都要重跑全部，300ms 起步
真正容易被忽略的，是 Tailwind 的“无 JS 行为”特性：它不绑定 data-bs-toggle、不自动初始化轮播，所有交互逻辑由你用 React/Vue 控制——这在 PWA 或 WebView 场景里反而是优势，避免了 Bootstrap JS 与框架生命周期冲突。但代价是你得自己补 ARIA 属性、键盘焦点管理，这点没人提，却决定着是否真能过无障碍审核。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
