选框架前需明确项目功能需求，小页面或已有设计系统时无需完整CSS框架；Bootstrap提供预设组件和JS交互，Tailwind是原子类工具集，二者适用场景不同。
选框架前先问清楚项目要什么功能
不是所有项目都需要完整 CSS 框架。小页面、静态文档、或已有成熟设计系统时，引入 Bootstrap 或 Tailwind CSS 反而增加维护负担。先确认：是否需要响应式栅格？有没有现成的组件需求（如模态框、下拉菜单）？团队是否熟悉类名语义（btn-primary vs bg-blue-500 hover:bg-blue-600）？这些直接决定框架类型。
Bootstrap 和 Tailwind CSS 的核心差异在哪
两者解决的问题不同，不能只看“流行度”选。
-
Bootstrap提供预设组件和行为（JS 交互逻辑），开箱即用但定制成本高；修改按钮样式常要覆盖大量!important或重写 SCSS 变量 -
Tailwind CSS是原子类工具集，不提供组件，靠组合类名构建 UI；适合高度定制化项目，但初学容易写出冗长 HTML，且无 JS 功能（需额外引入Alpine.js等） - 若项目需快速交付管理后台，
Bootstrap更省力；若做设计驱动型 SaaS 产品，Tailwind CSS更灵活
注意构建工具和 CDN 引入的实际限制
直接用 引入 CDN 版本最简单，但有隐藏代价：
- CSP 策略可能拦截外部域名资源，导致样式白屏
- CDN 资源无法利用本地缓存复用，每次部署都走网络请求
- 没有 SRI（Subresource Integrity）校验时，CDN 被劫持会导致样式错乱甚至 XSS 风险
- 构建工具（Vite/Webpack）中若用
@import引入 CDN 地址，打包时不会解析，最终仍走运行时 HTTP 请求
真实项目中，推荐把框架作为 npm 包安装（如 npm install bootstrap），再通过构建流程导入，才能启用 tree-shaking、主题变量定制和类型提示。
别忽略团队协作和长期维护成本
框架选型不是技术决定，而是协作契约。例如：
- 用
Chakra UI就默认接受 React + JSX + theme object 配置方式，前端新人得先学它的useStyleConfig和extendTheme - 用
Pure CSS或Normalize.css+ 手写 CSS，则要求团队对选择器优先级、BEM 命名、媒体查询组织有共识 - 多人并行开发时，
Tailwind的类名爆炸可能让 Code Review 变成“找错别字”，而Bootstrap的 class 冲突（如多个col-6套嵌）又容易引发布局意外
真正难的从来不是“怎么引入”，而是“改一处，谁来保证其他 27 个页面不崩”。选框架前，先跑通一个最小闭环：从 index.html 加载、到自定义主题生效、再到组件状态切换（如折叠/展开）全部可控——这比看官网 demo 更说明问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
