为什么我放弃了Bootstrap，彻底投入Tailwind CSS的怀抱？

程序员阿峰
14 阅读5分钟

如果你是一个前端开发者，一定经历过这样的场景：
写一个按钮，需要想一个类名，然后切到CSS文件，写一堆样式，再切回HTML……
或者，你用了Bootstrap，虽然快，但是想改点东西，发现所有网站都长得差不多，想定制又得疯狂覆盖样式。

直到我遇到了Tailwind CSS，一切都变了。
今天，我就用一篇文章，告诉你为什么Tailwind CSS值得成为你的下一个“心头好”。

一、什么是Tailwind CSS？

简单说，Tailwind是一个“实用工具优先”的CSS框架。
它不像Bootstrap那样给你预制的组件（比如.btn、.card），而是提供了大量原子化的工具类：

  • flex 让元素变成flex布局
  • pt-4 设置padding-top为1rem
  • text-center 让文字居中

你只需要在HTML里组合这些类，就能直接构建出任何设计。
不需要写一行自定义CSS！

来看个例子：

html

<!-- 传统方式：你需要写一个.button类 -->
<button class="btn">Click me</button>

<!-- Tailwind方式：组合工具类 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

是不是很直观？甚至有点“所见即所得”的快感。

二、为什么Tailwind让我“真香”？

1. 开发效率起飞，再也不用纠结类名

以前写CSS最头疼的就是命名。
一个.wrapper不够，还得.wrapper-inner，甚至.wrapper-inner__content……
现在？所有样式直接写在元素上，再也不用想名字，手速直接×2。

2. 响应式设计，简单得像喝水

以前写媒体查询，得单独写一段CSS。
现在只需要在类名前加个前缀：

html

<div class="text-base md:text-lg lg:text-xl">
  不同屏幕不同字号
</div>

md: 代表中等屏幕以上生效，lg: 代表大屏幕。
一行代码搞定响应式，简直不要太爽。

3. 样式作用域明确，没有“样式冲突”

因为每个类只做一件事，所以不用担心某个全局样式污染了你的组件。
比如你写了一个 p-4 表示内边距，它永远不会影响到其他元素。
代码维护成本直线下降。

4. 设计系统，天然统一

通过配置文件 tailwind.config.js，你可以定义颜色、间距、字体等设计token。
团队协作时，所有人都用同一套设计变量，保证了UI的一致性。
比如 bg-primary 背后就是一个标准色，想改全局颜色？改一个配置就够了。

5. 暗黑模式、状态样式，一应俱全

想支持暗黑模式？用 dark: 前缀：

html

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  自适应暗黑模式
</div>

想添加悬停效果？用 hover: 前缀：

html

<button class="bg-blue-500 hover:bg-blue-600">
  悬停变色
</button>

甚至还有 focus:、active:、disabled: 等等，几乎所有状态都覆盖。

三、案例对比：同样的卡片，两种写法

传统CSS写法（假设你手写或用了Bootstrap）

HTML：

html

<div class="card">
  <img src="sunset.jpg" alt="Sunset" class="card-img">
  <div class="card-content">
    <h2 class="card-title">The Coldest Sunset</h2>
    <p class="card-text">Lorem ipsum dolor sit amet...</p>
  </div>
</div>

CSS：

css

.card {
  max-width: 24rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.card-img {
  width: 100%;
}
.card-content {
  padding: 1.5rem;
}
.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
/* 还要处理暗黑模式、响应式…… */

Tailwind写法

HTML：

html

<div class="max-w-sm rounded-lg overflow-hidden shadow-lg dark:bg-gray-800">
  <img class="w-full" src="sunset.jpg" alt="Sunset">
  <div class="px-6 py-4">
    <h2 class="font-bold text-xl mb-2 text-gray-900 dark:text-white">The Coldest Sunset</h2>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      Lorem ipsum dolor sit amet...
    </p>
  </div>
</div>

不需要写任何自定义CSS！
代码全在HTML里，结构清晰，修改起来一目了然。

四、Tailwind 真的完美吗？也有一些“槽点”

  1. HTML 看起来有点“臃肿”
    类名一长串，可能影响阅读。
    解决方案：可以用 Prettier 插件自动排序类名，或者把重复的样式提取成组件。
  2. 学习曲线
    需要记一些类名，比如 pt-4 代表 padding-top: 1rem。
    解决方案：配合 VSCode 插件 Tailwind CSS IntelliSense，有自动补全和提示，用两天就熟悉了。
  3. 自定义复杂样式时
    有些特殊样式（比如复杂动画）可能还是要写一点自定义CSS。
    解决方案：Tailwind 提供了 @apply 指令，可以在CSS里复用工具类，完美结合。

五、我的实际体验

我从去年开始在项目中全面使用Tailwind，包括个人项目和公司项目。
最大的感受是：开发过程变得非常流畅。
以前写样式要频繁切换文件，现在几乎是“一条龙”写完一个组件。
而且因为样式和HTML在一起，修改时也更容易理解上下文。

团队协作方面，我们用Tailwind后，再也没有因为CSS命名冲突吵过架。
新成员上手也很快，因为不需要研究复杂的CSS文件结构。

六、谁应该尝试Tailwind？

  • 前端新手：想快速写出漂亮的页面，同时学习CSS属性（因为类名和CSS属性对应很直观）
  • React/Vue 开发者：配合组件化开发，体验极佳
  • UI设计师：可以自己动手实现设计稿，不用等前端
  • 任何厌倦了手写CSS或框架重样的人

废话不多说，你可以复制代码，感受下

Tailwind CSS 图片生成器

Tailwind CSS 图片生成器

使用 Tailwind CSS 构建的响应式图片展示组件

<!-- 图片容器 -->
<div class="relative mb-6">
  <img 
    src="https://picsum.photos/400/250" 
    alt="示例图片" 
    class="w-full h-64 object-cover rounded-lg shadow-md"
  >
  <!-- 突出显示效果 -->
  <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-black/50 to-transparent rounded-lg"></div>
</div>

<!-- 卡片内容 -->
<div class="bg-gray-50 p-4 rounded-lg">
  <h2 class="text-xl font-semibold text-gray-800">图片标题</h2>
  <p class="text-gray-600 mt-2">这是通过 Tailwind CSS 实现的图片展示组件，支持响应式布局和视觉突出效果。</p>
</div>

<!-- 按钮 -->
<div class="mt-6 flex justify-center">
  <button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-lg transition duration-300">
    生成新图片
  </button>
</div>

七、如何开始？

  1. 安装：npm install -D tailwindcss

  2. 初始化：npx tailwindcss init

  3. 配置 content 选项，告诉Tailwind扫描哪些文件

  4. 在CSS中引入：

    css

    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 运行构建，然后在HTML里尽情使用！

详细步骤可以看官方文档，非常清晰。

结语

Tailwind CSS 不是要取代你手写CSS，而是提供一种更高效、更一致的开发方式。
它让我重新找回了写样式的乐趣——不再繁琐，不再纠结。
如果你还没试过，我强烈建议你在下一个项目中尝试一下，也许你也会像我一样“一发入魂”。

最后，如果你喜欢这篇文章，欢迎点赞、评论、转发！
你在用Tailwind吗？有什么心得或吐槽？评论区见！

关注我，获取更多前端干货！

avatar
文章
阅读
粉丝