TailwindCSS 和 Bootstrap、CSS-in-JS 有什么区别？

先说结论

TailwindCSS、Bootstrap 和 CSS-in-JS 解决的是同一个问题：怎么写样式。但它们的出发点完全不同。

Bootstrap 更像一套现成 UI 套件，按钮、表单、栅格、弹窗都有默认方案，适合快速搭页面。TailwindCSS 更像一盒低层级样式积木，用大量原子类组合出界面。CSS-in-JS 则把样式放进 JavaScript 或组件逻辑里，适合样式强依赖状态、主题和运行时变量的场景。

三者的核心差异是什么？

方案	样式主要写在哪里	核心特点	典型场景
Bootstrap	预设组件类和工具类	开箱即用，默认 UI 完整	管理后台、原型、低定制页面
TailwindCSS	HTML / JSX 的 className 中	原子类组合，定制空间大	产品页面、自定义设计系统、长期维护项目
CSS-in-JS	JS / TS 组件代码中	样式可读状态和变量	复杂组件库、主题切换、动态样式

Bootstrap 先给你一套设计好的组件。TailwindCSS 不提供“按钮组件”，而是提供 px-4 py-2 rounded bg-blue-600 text-white 这样的工具类。CSS-in-JS 则通常会写成组件内部样式，根据 props、状态和 theme 动态生成样式。

Bootstrap：从组件库起步，也有 v5 工具类

Bootstrap 的优势仍然是完整组件和成熟约定。栅格、按钮、表单、导航、弹窗、下拉菜单这些常见 UI，它基本都给了默认样式和交互规范。对内部系统来说，这种默认值很有价值。

Bootstrap v5 也加强了 utilities，比如 d-flex、gap-3、p-4、text-center、border 等工具类。它已经不只是组件库，也有一些接近原子 CSS 的写法。

它的问题也明显：默认视觉风格很强，组件结构有既定模式，想完全改成交互复杂的品牌 UI 会比较费劲。如果项目已有成熟设计系统，Bootstrap 的默认组件可能反而成为包袱。

TailwindCSS：原子类让定制更快，但 className 会变长

TailwindCSS 的核心思路是 utility-first。它不鼓励你先写 .card-title、.primary-button 这样的语义类，而是直接用工具类描述样式。

jsx
<button className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">保存</button>

打开组件文件就能看到按钮的间距、颜色、字号、hover 状态，不需要在 CSS 文件和组件之间来回跳。它也很适合把 design tokens 映射到 Tailwind 主题里，让团队共享颜色、间距、字号和断点。

代价是 className 可能很长。解决办法通常不是回到传统 CSS，而是把重复样式沉淀成组件，或者用 clsx、tailwind-variants、class-variance-authority 这类工具管理变体。

CSS-in-JS：运行时灵活，也要看是否有零运行时方案

CSS-in-JS 是一类方案，常见的有 styled-components、Emotion、Stitches、Vanilla Extract、Linaria 等。它的核心价值是样式可以贴近组件逻辑。

tsx
const Button = styled.button<{ active: boolean }>`
  background: ${({ active }) => active ? '#2563eb' : '#e5e7eb'};
  color: ${({ active }) => active ? '#fff' : '#111827'};
`;

传统运行时 CSS-in-JS 会在浏览器运行时生成样式、插入 style 标签，确实可能带来额外开销。服务端渲染也要处理样式收集、注入顺序和 hydration 一致性。但 Vanilla Extract、Linaria 这类 zero-runtime 方案会在构建阶段生成 CSS 文件，运行时负担小得多。

所以不能简单说“CSS-in-JS 一定慢”，要看具体工具是运行时生成，还是构建期抽取。

性能、团队协作和设计系统怎么选？

从性能看，TailwindCSS 通常在构建阶段扫描源码，只生成用到的 CSS，运行时没有样式生成逻辑。Bootstrap 默认提供一整套 CSS，如果不做裁剪，可能包含很多没用到的样式。CSS-in-JS 要看类型：运行时方案更灵活但有运行时成本，零运行时方案性能更接近传统 CSS。

从团队协作看，Bootstrap 学习成本最低；TailwindCSS 需要团队习惯工具类和设计 token；CSS-in-JS 对组件状态、主题上下文、SSR、样式注入顺序要求更高。

设计系统落地时，Bootstrap 适合从现成组件反推规范；TailwindCSS 适合把 token 变成低层级工具类；CSS-in-JS 适合把 token 和组件逻辑绑定起来。

什么时候选谁？

如果项目要快，选 Bootstrap。它的默认组件能节省大量时间。

如果项目要定制，又希望样式规则统一，选 TailwindCSS。它很适合和 design tokens、headless 组件一起用。

如果项目要做复杂主题、组件库和运行时样式逻辑，选 CSS-in-JS，并优先评估是否需要 zero-runtime。

可以混用，但边界要清楚。页面布局归 TailwindCSS，复杂交互组件归组件库，主题 token 统一来源。不要同一个按钮一半靠 Bootstrap，一半靠 Tailwind，最后再套 CSS-in-JS 覆盖。选型只要能让团队少写覆盖代码、少做重复决定、少在样式问题上内耗，就是合适的。