提问：你在项目中使用过 Tailwind CSS 吗？

Tailwind 为什么有人爱，有人恨。你是爱，还是恨？

🧨 一、争议之源

Tailwind CSS 是这几年前端圈最具争议的工具之一。

- ❤️ 喜欢的人说：

"用过就回不去了！写样式像拼乐高一样爽！"

- 💢 讨厌的人怒吼：

行内样式一坨代码，看得脑壳痛
class 命名堆成墙，调试像在粪坑里捞钥匙🔑
记那么多奇奇怪怪的缩写？搞笑吧！

这不是"风格不合"这么简单，而是一场前端哲学之争：结构和样式，是不是应该彻底分离？

🚀 二、核心优势

✅ 命名地狱终结者

传统 CSS：

html 复制代码

<!-- 命名越来越魔幻 -->
<div class="container-wrapper-item-title-btn"></div>

Tailwind：

html 复制代码

<!-- 所见即所得 -->
<button class="px-4 py-2 bg-blue-500 rounded-lg text-white">按钮</button>

"不再因为命名卡壳，也不怕团队命名风格五花八门。"

✅ 屎山清洁机

CSS 代码常见问题：

改旧代码像拆炸弹，动一行炸一片
不敢删样式，只能往上覆盖，最终堆成屎山🗻

Tailwind 的原子类机制：

每个 class 职责单一，复用自动合并 （写 1 万次 flex 也只打包一次）
没有"全局污染"，删除 HTML 时样式也一并清除

✅ 开发效率飞升

🧠 上下文共生

HTML + 样式合一，无需在 .html 和 .css 文件间来回切换
AI 辅助写代码时更精准理解上下文（如 Copilot、ChatGPT）

🖱️ 一键扒皮

浏览器 F12，直接复制别人的 class 结构，即可还原样式
模仿优秀网站从未如此简单，像素级还原无需设计稿

📏 设计风格约束

配合设计系统提前约定色号、间距、字体大小
防止"一个按钮20种写法"的混乱局面

🌑 三、应用场景

💼 强大的 UI 组件库支持：如 Shadcn UI

源码完全暴露，可直接在 Tailwind 基础上二次开发
对比传统组件库（Element UI、Ant Design）：
- 不再受 props 限制
- 样式修改不用加 !important、不用 hack CSS 变量

🤝 团队协作更丝滑

没有"祖传 reset.css"冲突
原子类写法不会互相干扰，后来的开发者也能放心接手

📘 四、教程

bootstrap和tailwind 区别：

html 复制代码

<!-- bootstrap 按钮 -->
<button class="btn btn-primary">按钮</button>

html 复制代码

<!-- tailwind css 按钮 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">按钮</button>

- 📦 安装和配置

接下来配置的是tailwindcss 4版本。跟3相比较，4自动检测html和js组件和其他模版去获取类名，生成相应的样式，然后写进css文件中。之前3是要配置一下扫描的文件后缀的。

像3的话要配一下tailwind.config.js:

js 复制代码

module.exports = {
  content: ['./index.html', './src/**/*.{js,vue,ts,jsx,tsx}'], // 扫描文件
  theme: {
    extend: {}, // 扩展主题
  },
  plugins: [],
}

以下是4结合vite的安装和配置：

通过npm安装tailwindcss和@tailwindcss/vite:

js 复制代码

npm install tailwindcss @tailwindcss/vite

在vite配置中加入@tailwindcss/vite:

js 复制代码

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

在css文件中加入:

js 复制代码

@import "tailwindcss";

就可以用了。

这里官方推荐使用两个插件:

Tailwind CSS IntelliSense：用来自动补全、语法检查、查看某个语法、以及语法写法高亮。
Prettier：class排序。比如说：

html 复制代码

<!-- 没排序之前 -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800"></button>

<!-- prettier 排序之后 -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3"></button>

Tailwind 的类名通常按 功能类别 排序，顺序大致如下（类似官方文档的结构）：

布局相关 （如 container, block, flex）
盒模型 （如 width, padding, margin）
视觉效果 （如 background, border, text）
状态和交互 （如 hover:, focus:, active:）
响应式断点 （如 sm:, md:, lg:）

- 📦 使用

示例

html 复制代码

cdn原生引入js的方式

<script src="https://cdn.tailwindcss.com"></script>

// 💡 编写示例：按钮
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg">
  登录
</button>

html 复制代码

// 🌗 深色模式示例
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  深色模式自动适配！
</div>

html 复制代码

// 📱 响应式布局
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="p-4 bg-red-100">1</div>
  <div class="p-4 bg-blue-100">2</div>
  <div class="p-4 bg-green-100">3</div>
  <div class="p-4 bg-yellow-100">4</div>
</div>

🎉 结语

结语：三段式心路历程

卧槽，这什么鬼？
好像真香？
真特么回不去了！

Tailwind CSS，不是"革命"，但确实是"解脱"：

"让样式维护变简单，是写好前端的第一步。"

"哪怕是屎，至少是结构清晰、不会炸锅的屎。"