CSS工具库不能自动构建网页，但能大幅减少重复写样式时间；Tailwind适合快速迭代项目，UnoCSS更轻量灵活，Bootstrap适合组件复用，关键在团队统一使用边界。
直接用 CSS 工具库不能“自动构建网页”，但能大幅减少重复写 margin、flex、text-center 这类样式的时间——前提是选对库、用对方式，否则反而增加调试成本。
Tailwind CSS 的 utility class 不是万能的，但适合快速迭代的项目
它把样式原子化，比如 pt-4、bg-blue-500、hover:scale-105 都是预设好的类。不用写 CSS 文件，也不用起类名，但得熟悉它的命名规则和层级逻辑。
- 开发时靠 IDE 插件（如 Tailwind CSS IntelliSense）补全，否则手敲效率极低
-
@layer和@apply要慎用：过度封装会丢失 utility 的可读性和响应式控制力 - 默认配置里
max-w-screen-xl这类断点可能不匹配你的设计稿，得改tailwind.config.js中的theme.screens - 生产环境必须启用
content配置扫描 HTML/JSX，否则 PurgeCSS 会删掉未显式出现的类
Bootstrap 5 的 class 体系更适合表单和组件复用，但定制成本高
它提供现成的 btn、card、navbar，语义清晰，文档全。但一旦要改颜色、圆角或间距，就得覆盖大量 !important 或重写 SCSS 变量。
- 用
bootstrap/dist/css/bootstrap.min.css是最省事的引入方式，但体积大（约 200KB） - 想减体积？改用
bootstrap/scss/源码 + 自定义_variables.scss，只@import需要的部分 -
form-control在 Safari 下默认有内阴影，得加shadow-none或重置box-shadow - 响应式栅格（
col-md-6）在 Flex 容器里可能失效，因为 Bootstrap 4+ 默认用 Flex 实现 grid，嵌套时要注意display冲突
UnoCSS 比 Tailwind 更轻、更灵活，但需要理解“规则驱动”逻辑
它不打包预设类，而是运行时按需生成 CSS。比如你写了 text-[#1e3a8a] 或 animate-[wiggle_1s_ease-in-out_infinite]，它就能识别并输出对应样式。
立即学习“前端免费学习笔记（深入）”；
- 开箱即用支持
variant（如hover:underline）、shortcuts（自定义别名），比 Tailwind 更易扩展 - 和 Vite / Astro / SvelteKit 集成简单，但 Webpack 项目得配
unocss-webpack-plugin - 不推荐在大型老项目中直接替换 Tailwind：两者语法相似但解析机制不同，
dark:等变体行为可能不一致 - 调试时看不到完整 CSS 文件，得靠浏览器开发者工具里的
uno.css源码映射，或启用devtools插件
真正卡住效率的往往不是“有没有工具库”，而是团队是否统一了原子类的使用边界——比如什么该用 flex，什么该抽成组件；要不要禁用 !important；如何处理设计系统里未覆盖的边缘状态。这些比选库更重要。
