开发者Andros Fenollosa最近写了一篇长文,标题很直白:《Why I don't recommend Tailwind CSS》。他列了六条理由,结论是中大型项目最好别用这个前端最流行的CSS框架之一。文章逻辑清楚,例子也扎实,唯独漏了一件事——他从头到尾没说清楚自己批评的是哪个版本的Tailwind。这个漏洞不小,因为Tailwind今年推出的v4,恰好在他吐槽最狠的几个点上做了改动。

六条罪状,一半是老账

原文的批评集中在六个维度:工具类多到要背几十个、HTML里堆满class破坏了结构与样式分离、items-centerjustify-center这类命名混乱不直观、w-[347px]这种任意值写法让设计系统形同虚设、新手学Tailwind容易学不会真正的CSS、以及@apply用多了HTML照样难读。

作者还挺公道,主动引用了Tailwind创始人Adam Wathan的反方论点——耦合关系并没有消失,只是从"CSS依赖HTML"变成了"HTML依赖CSS",在React、Vue这类组件化框架里这套逻辑本来就成立,因为逻辑、结构、样式早就写进同一个文件了。但作者认为,这个论点在服务端渲染、走传统模板的项目里站不住脚。

这条边界划得挺清楚,问题出在另一半——那些他归咎于框架设计的"痛点",有的其实是版本问题,不是哲学问题。

批评落在哪个版本 原文批评(未标版本) 构建慢、需反复查文档 任意值 w-[347px] 逃逸系统 动态拼接类名易失效 @apply 破坏可读性 命名不一致 / 学习曲线 (哲学层面,与版本无关) Tailwind v4 的回应 全量构建提速最高3.5倍 增量构建最高提速8倍 无变化时提速超100倍 新增类检测机制 @source @apply 需显式样式表引用

v4的官方数字,正好戳中原文软肋

Tailwind官方公布的v4引擎数据摆在那:全量构建最高提速3.5倍,增量构建(含新CSS)最高提速8倍,如果内容没变化,重新构建能快100倍以上,常常在微秒级完成。这组数字对应的正是v3时代被吐槽最多的"构建慢、开发体验卡顿"问题。

更关键的是"类检测机制"。v3时期动态拼接类名(比如用变量拼字符串生成class)经常检测失败,样式莫名其妙不生效,逼着开发者去查文档、猜规则——这和原文说的"要开着浏览器标签页查半天"其实是同一类痛。v4新增了@source和显式注册的方式,专门解决这个问题。@apply的行为也变了,v4要求样式表引用更明确,原文里那句"Adam Wathan自己都说@apply基本是骗人的",某种程度上已经是旧版本的历史评价。

原文没交代自己讨论的是v3还是v4,读者很容易把一个已经被官方部分修正的痛点,当成Tailwind的永久缺陷来记。

哪些批评v4治不好

但不是所有批评都能靠版本更新洗白。items-centerjustify-center语义不对齐,这是Tailwind从诞生起就有的命名逻辑,跟引擎重写没关系。任意值语法w-[347px]依然存在,v4没有取消这个逃逸口,设计系统的一致性还是得靠团队自律,框架管不了。新手学CSS容易被Tailwind的抽象层挡住路,这也是学习方式的问题,不是性能问题。

  • 结论.原文六条批评里,构建慢、类检测失效这两条更像是v3时代的旧账,v4已经动手改过;命名不一致、任意值滥用、学习曲线这三条是设计哲学层面的选择,版本更新解决不了。
  • 风险.如果只看这篇文章就下"Tailwind不行"的结论,很可能是拿v3的体验在评判v4的产品,判断本身就跑偏了时间线。

对技术负责人来说,更现实的判断框架其实很简单:项目是组件化架构(React、Vue)还是服务端模板,团队里CSS基础扎实的人多不多,用的是v3还是v4。这三个变量比"推荐还是不推荐"这种二元结论更有用。CSS原生特性这两年也在补课,@layer、原生嵌套、:has()、容器查询都已经不用装任何东西就能用,Tailwind的护城河变窄了一些,但类的可读性和团队协作成本这道题,暂时还没人给出比工具类更简单的答案。