用 tailwind 更优，因其支持 purgecss 精准剔除未用样式；bootstrap 需手动引入 scss 子模块或第三方插件压缩；bulma/foundation 因嵌套选择器、无 esm、不可按需提取而拖慢首屏；css-in-js 有运行时开销，应慎用于高频交互场景。
用 Tailwind 还是 Bootstrap？先看你的构建流程是否支持 PurgeCSS
框架本身不慢，慢的是没删掉的无用 CSS。Tailwind 默认生成大量工具类，Bootstrap 的 bootstrap.css 里也包含所有组件样式——哪怕你只用了 btn 和 card。关键不在“用不用框架”，而在“能不能精准提取实际用到的样式”。
如果你项目用 Webpack/Vite + PostCSS，tailwindcss 的 content 配置配合 purge（v3+ 改为 content）能干掉 90% 以上未使用的类；而 Bootstrap 官方不内置 tree-shaking，得靠 bootstrap/scss 手动 import 子模块，或引入第三方插件如 autoprefixer + cssnano 做声明级压缩。
- 用 Tailwind：确保
tailwind.config.js中content字段覆盖所有模板路径，例如["./src/**/*.{html,js,jsx,ts,tsx}"] - 用 Bootstrap：别直接引入
dist/css/bootstrap.min.css，改用 SCSS 源码 +@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/buttons"; - 两者都建议开启 CSS 压缩和 Gzip/Brotli，否则 Purge 后的体积优势会被抵消
为什么用 Bulma 或 Foundation 会悄悄拖慢首屏？
这类框架依赖大量嵌套选择器和 @import 链式加载，导致 CSS 解析时间上升、FOUC（Flash of Unstyled Content）概率增加。Bulma 的 .button.is-primary.is-large 类名组合在浏览器中需多次匹配，比单层类名（如 Tailwind 的 bg-blue-500 text-white py-2 px-4）更耗解析资源。
更隐蔽的问题是：它们通常不提供 ESM 版本，无法被现代打包器做静态分析；且默认未启用 prefers-reduced-motion 或 color-scheme 等渐进增强特性，后续补兼容逻辑反而加重运行时负担。
立即学习“前端免费学习笔记（深入）”；
