I don’t recommend Tailwind CSS

我不推荐使用 Tailwind CSS

Tailwind CSS is a very popular CSS framework among web developers. With no prior graphic design knowledge, it solves the standardization of spacing, colors, and sizes for you. And on top of that, if you are even slightly disorganized, it forces you into a working methodology based on building large structures out of simple utilities (Utility-First Fundamentals). Add to all that a documentation that is easy to understand with a flawless search. In the past I used it on several projects, it helped me build user interfaces quickly. And despite all of that, it is a tool I would not recommend in every context. I am going to give you my point of view, my reasons, why you should think twice before using Tailwind CSS on medium or large projects. The only thing I ask of you is an open mind, self-criticism, and a willingness to learn.

Tailwind CSS 是网页开发者中非常流行的 CSS 框架。即使没有平面设计基础，它也能为你解决间距、颜色和尺寸的标准化问题。不仅如此，如果你平时有些缺乏条理，它还会强制你采用一种基于简单工具类构建大型结构的工作方法（即“工具类优先”原则）。再加上它那易于理解且搜索功能完美的文档，过去我在多个项目中都使用过它，它确实帮助我快速构建了用户界面。尽管如此，它并不是一个我会在所有场景下都推荐的工具。我将分享我的观点和理由，告诉你为什么在处理中大型项目时，你应该三思而后行。我唯一的要求是保持开放的心态、自我批判的精神以及学习的意愿。

You have to learn dozens of classes

你必须学习几十个类名

Tailwind has thousands of utility classes. Even though the documentation is very good and the editor autocomplete helps a lot, there is a ceiling of basic classes you have to internalize. Most likely, at first you will develop with a browser tab open and the search box working nonstop. You spend time understanding the most appropriate way to apply each class. A slow process at the start. And if you have created your own classes that mix with Tailwind’s, the difficulty grows.

Tailwind 拥有数千个工具类。尽管文档非常出色，编辑器自动补全功能也很有帮助，但你仍然需要内化一定数量的基础类。很可能在刚开始时，你必须一直开着浏览器标签页，不停地使用搜索框。你需要花费时间去理解应用每个类的最合适方式，起步阶段会比较缓慢。如果你还创建了自己的类并与 Tailwind 的类混合使用，难度会进一步增加。

It breaks the separation between structure and design

它打破了结构与设计的分离

Tailwind CSS is a gigantic utility library, atomic classes with specific jobs. Unless you group classes with @apply, you end up including dozens of them in your HTML. This breaks the classic rule of separating structure from design, or HTML from CSS. It bloats the HTML, readability suffers, and you lose reusability. That said, this one is worth pausing on, because it is the criticism that gets rebutted the most. Adam Wathan, the creator of Tailwind, wrote the foundational text of the defense, and his argument is a good one. The separation of concerns does not disappear, it changes direction. With “semantic” CSS, your CSS depends on the HTML; you can restyle the HTML, but your CSS is not reusable. With utilities, your HTML depends on the CSS; the CSS is reusable, but your HTML does not restyle itself. The coupling exists in both cases, only the direction of the arrow changes. The argument holds in a world of components, where React or Vue already put logic, markup, and style in the same file. There, the separation by file type was already broken by you beforehand. But in a server-rendered project, with templates and classic CSS, the separation still makes complete sense. It is not a universal law, it is a decision that depends on your architecture.

Tailwind CSS 是一个巨大的工具库，由具有特定功能的原子类组成。除非你使用 @apply 对类进行分组，否则你的 HTML 中最终会充斥着几十个类名。这打破了结构与设计（或 HTML 与 CSS）分离的经典规则。它会导致 HTML 臃肿，可读性下降，并丧失可重用性。话虽如此，这一点值得深思，因为这是最常被反驳的批评。Tailwind 的创建者 Adam Wathan 曾撰写过一篇基础性的辩护文章，他的论点很有道理：关注点分离并没有消失，只是改变了方向。使用“语义化” CSS 时，CSS 依赖于 HTML；你可以重新设计 HTML，但 CSS 无法重用。使用工具类时，HTML 依赖于 CSS；CSS 是可重用的，但 HTML 本身不会自动重新设计。耦合在两种情况下都存在，只是箭头的方向变了。在组件化世界中，这种论点是成立的，因为 React 或 Vue 已经将逻辑、标记和样式放在了同一个文件中。在那里，按文件类型分离的原则早已被打破。但在服务器渲染的项目中，配合模板和传统 CSS，这种分离仍然非常有意义。这不是一条普适的定律，而是一个取决于你架构的决策。

Its names are not consistent

命名不一致

Its naming is not always coherent, at times it is opaque and tends to confuse. Look at the alignment classes. What is the difference between items-center, justify-center, text-center, and place-content-center? The name is not intuitive and does not follow a clear pattern. In case you are curious, items-center aligns items in a flex container, justify-center aligns them on the main axis, text-center centers text, and place-content-center centers content in a grid. Let me rename them looking for coherence: flex-align-items-center, flex-justify-content-center, text-align-center, and grid-place-items-center. Do you notice the difference? There are more examples: justify-center but items-center (not align-center); border gives 1px but border-2 gives 2px. Small frictions that add up.

它的命名并不总是连贯的，有时晦涩难懂，容易让人困惑。看看对齐类：items-center、justify-center、text-center 和 place-content-center 之间有什么区别？这些名称并不直观，也没有遵循清晰的模式。如果你好奇的话：items-center 在 flex 容器中对齐项目，justify-center 在主轴上对齐它们，text-center 居中文本，而 place-content-center 在网格中居中内容。让我为了连贯性重新命名它们：flex-align-items-center、flex-justify-content-center、text-align-center 和 grid-place-items-center。你注意到区别了吗？还有更多例子：justify-center 对应 items-center（而不是 align-center）；border 提供 1px，但 border-2 提供 2px。这些微小的摩擦累积起来就成了问题。

The design system is not enforced as much as it seems

设计系统并没有看起来那么强制

One of the big arguments in favor of Tailwind is that its spacing and color scale forces you to be consistent. And that is true, but with a catch, the arbitrary values. You can write w-[347px], text-[#1a2b3c], or p-[5.5rem] without anything warning you. They are an escape hatch that breaks the system. Nothing stops you from using sky-400 and blue-400 in the same project. Consistency still depends on your discipline, not on the framework. The system helps you, but it does not save you from yourself.

支持 Tailwind 的一个重要论点是，它的间距和颜色比例强制你保持一致性。这确实是真的，但有一个陷阱：任意值（arbitrary values）。你可以写 w-[347px]、text-[#1a2b3c] 或 p-[5.5rem]，而没有任何警告。它们是一个破坏系统的“逃生舱”。没有任何东西能阻止你在同一个项目中使用 sky-400 和 blue-400。一致性仍然取决于你的自律，而不是框架。系统可以帮助你，但无法拯救你脱离自身的混乱。

It is not a good gateway to learning CSS

它不是学习 CSS 的好入门工具

Tailwind is easy to use if you already master styling. But for those with little CSS experience, it creates a false sense of learning. It conveys that it is a minimalist way of writing CSS, taking away the effort of keeping your code tidy. Using so many pre-built classes hinders a developer’s ability to truly master CSS. The time you save naming classes you lose learning to use the framework in the most efficient way. On the other hand, if you go deep into Tailwind, you drift away from learning the fundamentals of the platform. pt-4 forces you to mentally translate to padding-top: 1rem. You gain fluency in the abstraction, not in CSS. To my students and coworkers I recommend learning CSS before Tailwind. And if you are already an experienced developer, you might not even need the framework.

如果你已经精通样式设计，Tailwind 很容易使用。但对于 CSS 经验不足的人来说，它会产生一种虚假的“学习感”。它传达出一种极简的 CSS 编写方式，省去了保持代码整洁的努力。使用过多的预构建类会阻碍开发者真正掌握 CSS。你节省了命名类的时间，却浪费在学习如何最高效地使用框架上。另一方面，如果你深入研究 Tailwind，就会偏离学习平台基础知识的方向。pt-4 强迫你在脑海中将其转换为 padding-top: 1rem。你获得的是对抽象概念的熟练度，而不是对 CSS 的熟练度。对于我的学生和同事，我建议先学习 CSS 再学习 Tailwind。如果你已经是一名经验丰富的开发者，你甚至可能根本不需要这个框架。

It is hard to read

它难以阅读

Let me show you a button with an indigo background, white text, semibold font, rounded corners, hover, and focus. First in vanilla CSS. I will take the liberty of using variables for colors and spacing, and nesting for hover and focus, something compatible today with every browser.

让我展示一个带有靛蓝色背景、白色文字、半粗体字、圆角、悬停和聚焦效果的按钮。首先是原生 CSS。我将使用颜色和间距变量，以及悬停和聚焦的嵌套写法，这些在当今所有浏览器中都是兼容的。

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-indigo: #4f46e5;
  --color-indigo-hover: #4338ca;
  --gap-s: 0.5rem;
  --gap-m: 1rem;
}

.button {
  padding: var(--gap-s) var(--gap-m);
  background-color: var(--color-indigo);
  color: var(--color-white);
  font-weight: 700;
  border-radius: var(--gap-s);

  &:hover, &:focus {
    background-color: var(--color-indigo-hover);
  }
}

Now in Tailwind CSS using @apply. 现在使用 Tailwind CSS 的 @apply：

.button {
  @apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700;
}

Vanilla CSS is self-explanatory, whereas with Tailwind you have to check the documentation. What color is bg-indigo-500? How round is rounded-lg? Is bg-indigo-700 darker than bg-indigo-500? The first snippet is easier to maintain, the learning curve for a new developer is low, and…

原生 CSS 一目了然，而使用 Tailwind 时，你必须查阅文档。bg-indigo-500 是什么颜色？rounded-lg 有多圆？bg-indigo-700 比 bg-indigo-500 更深吗？第一个代码片段更容易维护，新开发者的学习曲线更低，而且……