Tailwind CSS 是一个在网页开发者中非常流行的 CSS 框架。它解决了间距、颜色和大小的标准化问题，即使是没有之前平面设计知识的人也可以轻松使用。而且，如果你稍微有些杂乱，它会迫使你采用一种基于使用简单工具构建大型结构的工作方法（Utility-First Fundamentals）。再加上文档易于理解，搜索功能完美。在过去，我在多个项目中使用过它，它帮助我快速构建用户界面。尽管如此，这并不是一个我在任何情况下都会推荐的工具。我将给出我的观点和理由，告诉你在中型或大型项目上使用 Tailwind CSS 前应该三思而后行。我唯一要求你的是保持开放的心态、自我批评和学习的意愿。你必须学习数十个 Tailwind 有的类，Tailwind 有成千上万的工具类。尽管文档非常好，编辑器的自动补全也提供了很大的帮助，但你必须内化一定数量的基础类。最有可能的是，最开始你将开发时打开一个浏览器标签，搜索框不停工作。你花时间去理解每个类应用的最合适方式。起初这是一个缓慢的过程。如果你创建了自己的类与 Tailwind 的类混合，难度就会加大。它打破了结构与设计的分离。Tailwind CSS 是一个庞大的工具库，原子类具有特定的功能。除非你使用 @apply 将类归类，否则你最终会在 HTML 中包含数十个类。这打破了分离结构与设计、HTML 与 CSS 的经典规则。这使 HTML 变得臃肿，影响可读性，丧失可重用性。也就是说，这一点值得暂停一下，因为这是最常被反驳的批评。Tailwind 的创始人 Adam Wathan 写下了辩护的基础文本，他的论点很有道理。关注点的分离并没有消失，而是方向发生了变化。使用“语义”CSS 时，你的 CSS 依赖于 HTML；你可以重新样式化 HTML，但你的 CSS 不可重用。使用工具类时，你的 HTML 依赖于 CSS；CSS 可重用，但 HTML 不会自动重新样式化。在两种情况下都有耦合，只有箭头的方向发生变化。这一论点在组件世界中成立，在那里，React 或 Vue 已将逻辑、标记和样式放在同一个文件中。在那里，文件类型的分离已经被你事先打破。但是在一个服务端渲染的项目中，带有模板和经典的 CSS，分离仍然完全合理。这不是一个普遍法则，而是取决于你的架构的决策。它的命名不一致。它的命名并不总是一致，有时有些晦涩且容易混淆。看看对齐类。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。这些小摩擦累积起来。设计系统的执行力并没有看起来那么强。支持 Tailwind 的一个主要论点是其间距和颜色比例迫使你保持一致。确实如此，但有一个前提，即任意值。你可以写 w-[347px]、text-[#1a2b3c] 或 p-[5.5rem]，没有任何警告。它们是打破系统的逃生舱。没有什么可以阻止你在同一个项目中使用 sky-400 和 blue-400。一致性仍然取决于你的自律，而不是框架。系统可以帮助你，但不能拯救你。它不是学习 CSS 的良好入门。对于已经掌握样式的开发者来说，Tailwind 易于使用。但对于 CSS 经验较少的人来说，它会造成一种虚假的学习感觉。它传达了这样一种观点：这是一种极简的书写 CSS 的方式，削弱了保持代码整洁的努力。使用这么多预构建的类阻碍了开发者真正掌握 CSS 的能力。你节省了起名类的时间，但你却失去了以最有效的方式使用框架的学习时间。另一方面，如果你深入研究 Tailwind，你会偏离学习平台基础的道路。我向我的学生和同事推荐在学习 Tailwind 之前先学习 CSS。如果你已经是一个经验丰富的开发者，你甚至可能不需要使用这个框架。它很难阅读。让我给你展示一个带有靛蓝背景、白色文本、半粗体的按钮……