写Tailwind CSS像在写屎山？这锅该不该它背

掘金前端

作者大前端历险记

2025年12月1日 15:52

我上次在群里吐槽Tailwind，被几个大佬围攻了：“现在还在写传统CSS的怕不是还在用jQuery？”、“都2025年了还用BEM？”，整得我都不敢说话了。

作为一个前端搬砖工，我从Nodejs到React再到Vue都踩过一遍坑，今天就跟大伙儿聊聊这个让我又爱又恨的Tailwind。

一、为什么我觉得Tailwind有时候真的很操蛋

1. 这HTML还能看吗？

这是我第一次看到Tailwind代码的反应：

<div class="flex flex-col md:flex-row items-center justify-between p-4 md:p-6 lg:p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
  <!-- 还有一堆嵌套div，每个都带着几十个类名 -->
</div>

同事问我：“这坨代码什么意思？”我看了半天说：“一个卡片，会动，能响应式，深色模式适配了……”但我心里想的是：这TM跟当年在HTML里写style="color: red; font-size: 14px;"有啥本质区别？

2. 接手别人的Tailwind项目有多痛苦

上个月接了个离职同事的项目，打开一看差点没背过气去：

<div className={`px-${size === 'large' ? 6 : size === 'small' ? 2 : 4} py-${hasIcon ? 3 : 2} ${variant === 'primary' ? 'bg-blue-500' : 'bg-gray-200'} ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'hover:opacity-90'}`}>
  {/* 还有50行类似的代码 */}
</div>

这种动态拼接类名的操作，让我调试的时候想砸键盘。查了半天发现有个按钮在某种状态下padding不对，原来是px-${size}这种骚操作导致的。

3. 这玩意真的能提高开发效率吗？

老板跟我说：“用Tailwind开发速度快啊！”但真实情况是：

边写边查文档：m-4和p-4到底哪个是margin哪个是padding？mt-4和mr-4又是啥？
遇到复杂布局：用flex还是grid？Tailwind的grid类名又长又难记
调个细节样式：想微调一个阴影，得查半天文档才知道shadow-lg和shadow-xl的区别

有这查文档的时间，我CSS早写完了。

二、但为什么大佬们都在吹爆Tailwind？

1. 等我真的用起来之后……

两个月后，当我对常用类名烂熟于心后，发现有些场景真香：

快速原型开发：产品经理站我身后：“这里改个间距，那里调个颜色，这个按钮hover效果换一下……”

以前：切到CSS文件 -> 找到对应的类 -> 修改 -> 切回来预览 -> 重复现在：直接在HTML里改几个类名 -> 实时预览

设计一致性：以前团队里每个开发者对“大间距”的理解都不一样，有人写margin: 20px，有人写margin: 24px，还有人写margin: 1.5rem。现在统一用m-5或m-6，UI终于统一了。

2. 性能确实牛逼

我原来不信，直到对比了项目打包后的CSS文件大小：

之前的项目（手写CSS）：main.css 87KB
现在的项目（Tailwind + JIT）：main.css 12KB

因为Tailwind只生成你用到的样式，不会有未使用的CSS代码。

3. 再也不用想类名了

还记得那些年被BEM命名支配的恐惧吗？

.card {}
.card__header {}
.card__header--active {}
.card__body {}
.card__footer {}
.card__footer__button {}
.card__footer__button--disabled {}

现在？直接写样式就行了，不用再想header-wrapper-inner-content这种傻逼名字了。

三、我从抗拒到真香的转变

转折点是我开始用正确的方式写Tailwind。

错误示范 ❌

// 直接把所有类名堆在组件里
function BadButton() {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      提交
    </button>
  );
}

正确姿势 ✅

// 1. 先封装基础组件
function Button({ 
  children, 
  variant = 'primary',
  size = 'medium',
  fullWidth = false 
}) {
  const baseClasses = "font-bold rounded transition-colors";
  
  const variants = {
    primary: "bg-blue-500 hover:bg-blue-700 text-white",
    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
    danger: "bg-red-500 hover:bg-red-700 text-white"
  };
  
  const sizes = {
    small: "py-1 px-3 text-sm",
    medium: "py-2 px-4",
    large: "py-3 px-6 text-lg"
  };
  
  const widthClass = fullWidth ? "w-full" : "";
  
  return (
    <button className={`${baseClasses} ${variants[variant]} ${sizes[size]} ${widthClass}`}>
      {children}
    </button>
  );
}

// 2. 使用 cva 库管理变体（更优雅）
import { cva } from 'class-variance-authority';

const buttonVariants = cva(
  "font-bold rounded transition-colors", // 基础样式
  {
    variants: {
      variant: {
        primary: "bg-blue-500 hover:bg-blue-700 text-white",
        secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
      },
      size: {
        small: "py-1 px-3 text-sm",
        medium: "py-2 px-4",
      }
    },
    defaultVariants: {
      variant: "primary",
      size: "medium"
    }
  }
);

// 3. 实际使用
function GoodButton() {
  return (
    <Button variant="primary" size="large">
      提交
    </Button>
  );
}

四、什么时候该用，什么时候不该用

赶紧用起来吧 👍

新项目，尤其是React/Vue/Svelte项目：组件化能很好解决Tailwind的可维护性问题
需要统一设计规范：设计系统配好了，大家就按这个来，别TM再自己发挥了
内部管理系统、后台项目：快速迭代，老板天天改需求，这种场景Tailwind无敌
团队协作项目：不用再解释为什么这里用margin-top: 8px而不是10px

算了，别用了 ❌

静态小网站：就几个页面，写点CSS完事了，别折腾
老项目迁移：除非你想加班加到死
完全不懂CSS的新手：Tailwind不是CSS的替代品，它是工具。连CSS盒模型都不懂就用Tailwind，等于不会开车就用自动驾驶
设计师天马行空：如果你们设计师每个页面风格都不一样，用Tailwind配置会把你逼疯

五、我总结的血泪经验

不要直接在JSX里堆类名：这是所有屎山的源头！一定一定要封装成组件
配置好自己的设计系统：别用默认配置，根据项目需求配一套自己的tailwind.config.js
善用 @apply：重复出现的样式组合，用@apply提取

/* 在CSS文件中 */
.btn-primary {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

结合现代工具链：clsx处理条件类名，tailwind-merge解决类名冲突
定期重构：发现重复的样式组合就抽象，别懒！

最后说句实话

用不用Tailwind，其实跟你用什么技术关系不大，关键看你怎么用。

那些说Tailwind垃圾的，多半是看到了滥用它的项目；那些吹爆Tailwind的，多半是用对了方法。

就像当年大家吵jQuery和原生JS，吵React和Vue一样，最后你会发现：工具没有对错，只有适不适合。 牛逼的程序员用记事本都能写出好代码，菜鸡用再牛逼的框架也能写出屎山。

所以，别吵了，赶紧去写代码吧。老板又改需求了，今天还得加班呢。

关注公众号" 大前端历险记"，掌握更多前端开发干货姿势！

普通视图