乐闻世界logo
6月3日 00:08

TailwindCSS 是什么？和 Bootstrap 有什么区别？核心优势详解

TailwindCSS 是一个 utility-first 的 CSS 框架——不提供预制的组件（如 .btn、.card），而是提供原子化的 utility class（如 .bg-blue-500、.text-center、.p-4），让你在 HTML 里组合出任何设计。

和 Bootstrap 的区别

Bootstrap 给你现成组件：btn-primary、card、navbar。快速但长得都一样。

TailwindCSS 给你积木块：p-4、bg-blue-500、rounded-lg。慢一点但完全自定义。

选择标准：需要快速原型用 Bootstrap，需要自定义设计用 TailwindCSS。

核心优势

1. 不用起名字。写 CSS 最烦的是想 class 名——.header-wrapper、.card-inner-container？TailwindCSS 直接写 utility class，不用起名。

2. 不用切换文件。样式写在 HTML 里，不用在 HTML 和 CSS 文件之间跳来跳去。修改某个元素样式时，直接改那一行 class，不用去 CSS 文件里找对应选择器。

3. 产物小。JIT 模式只生成你用到的 class。一个页面只用 50 个 class，CSS 就只有几 KB。Bootstrap 整包 150KB+。

4. 响应式简单。不用写 @media 查询：

html
<div class="text-sm md:text-base lg:text-lg">
  移动端小字，桌面端大字
</div>

sm/md/lg/xl/2xl 是预设断点，覆盖 99% 的响应式需求。

常见反对意见

"HTML 里一堆 class 太丑了"：确实不如语义化 class 好看。但实用——不用起名、不用切换文件、不用怕样式冲突。团队习惯后效率反而更高。

"和 inline style 有什么区别"：inline style 没有响应式（@media）、没有状态变体（hover:focus）、没有设计约束（只能用预定义值）。TailwindCSS 都有。

"难以复用"：用 @apply 提取复用组合，或封装成组件（React/Vue 组件）。大多数情况下组件级复用比 CSS 级复用更好。

快速开始

bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
css
/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
html
<h1 class="text-3xl font-bold text-blue-600 hover:text-blue-800">
  Hello TailwindCSS
</h1>
标签：Tailwind CSS