Tailwind CSS 被认为是现代网页开发中的一种倒退，它集合了CSS和现代开发中的所有缺点。尽管CSS在技术上取得了如flexbox、grid等进步，提供了内联样式和样式表两种有效方式，但Tailwind却将这些优点抛弃，反而加剧了开发中的问题。

Tailwind：集所有缺点于一身的CSS框架

Tailwind CSS 被作者称为“集所有缺点于一身”的CSS框架，它不仅没有解决CSS的固有缺陷，反而加剧了这些问题，甚至引入了新的麻烦。文章从CSS的优缺点出发，逐步分析了Tailwind的不足之处。

CSS的优缺点
CSS作为现代网页开发的基础技术之一，虽然经历了多次改进（如引入了flexbox、grid、容器查询等），但其核心语义并未发生根本性变化。CSS提供了两种主要的样式应用方式：内联样式和样式表。内联样式虽然简单直接，但容易导致代码冗余；样式表则更为强大，支持媒体查询、伪元素等高级功能，但存在选择器优先级和样式冲突的问题。

Tailwind的问题
Tailwind选择了通过类名来实现内联样式的方式，这种方式虽然看似方便，但实际上带来了诸多问题。首先，Tailwind的类名是简单的字符串，缺乏键值对的清晰结构，导致可读性和可维护性降低。其次，Tailwind没有提供类似样式表的规则集功能，开发者不得不通过复制类名来实现多元素的样式复用，这违背了代码复用的基本原则。

CSS的问题在Tailwind中更加严重
Tailwind没有解决CSS的选择器优先级问题，反而使其更加复杂。由于Tailwind的类名是动态生成的，开发者很难预测样式冲突的结果，最终不得不依赖!important标签来强制应用样式。此外，Tailwind依赖于打包工具，虽然声称可以减少CSS文件的大小，但实际上增加了JavaScript文件的大小，影响了网页的加载性能。

开发者友好性
Tailwind并没有减轻开发者的学习负担，反而要求开发者同时掌握CSS和Tailwind的抽象规则。Tailwind缺乏类型安全，开发者需要依赖编辑器扩展来查看类名对应的CSS样式，这增加了开发过程中的不确定性。此外，Tailwind在版本更新时可能会修改类名，开发者需要手动检查数千个类名的变化，这无疑增加了维护成本。

为什么Tailwind仍然流行？
尽管Tailwind存在诸多问题，但它成功的原因在于其提供了一个统一的配置文件，强制开发者使用全局样式常量，这在一定程度上解决了大型项目中样式不一致的问题。此外，Tailwind作为默认的样式解决方案，得到了许多开发工具和LLM（大型语言模型）的支持，进一步推动了其普及。

更好的替代方案
作者推荐使用vanilla-extract作为Tailwind的替代方案，它提供了类型安全的CSS-in-JS解决方案，能够更好地管理样式和全局常量。虽然它并非完美无缺，但在大多数场景下表现优异。

总结
Tailwind CSS虽然在某种程度上简化了样式管理，但它集成了CSS的所有缺点，并引入了新的问题。对于追求代码质量和性能的开发者来说，Tailwind并不是最佳选择，而像vanilla-extract这样的工具可能更适合现代前端开发的需求。

评论内容主要围绕Tailwind CSS的优缺点展开，观点多样且存在争议。以下是总结：

支持Tailwind的观点：

1. 提高开发效率：许多开发者认为Tailwind减少了文件切换，样式与标记代码共存，使得开发速度更快。

   • 引用： "using Tailwind is all about speed and reducing file hopping." (评论10)
   • 引用： "I can just tell AI what I want, and it spits out exactly what I want." (评论12)

2. 易于维护：Tailwind的样式直接写在HTML中，减少了跨文件查找样式的麻烦，尤其适合大型团队。

   • 引用： "It’s SO much easier when the styles are on the component I’m looking at." (评论17)
   • 引用： "Tailwind plays a huge part in making sure everyone writes something that’s much more easier for the next person who has to read it." (评论17)

3. 与AI结合良好：AI工具能够快速生成Tailwind代码，进一步提升了开发效率。

   • 引用： "Tailwind was better for me before AI, and it’s WAY better for me with AI." (评论13)
   • 引用： "Claude can write CSS and HTML together in my templates." (评论13)

反对Tailwind的观点：

1. 代码冗长且难以维护：Tailwind的类名列表可能变得非常冗长，导致代码难以阅读和维护。

   • 引用： "The class declarations are so huge with 15-30 class names in one line that you always forget where you are." (评论3)
   • 引用： "Tailwind CSS declarations can mutate into a frankenstein monster." (评论3)

2. 缺乏CSS继承性：Tailwind忽略了CSS的继承性，导致开发者需要重复编写相同的样式。

   • 引用： "Tailwind CSS still obeys the same specificity rules of CSS so instead of font-medium on every <a> tag under nav why not just put font-medium on the parent <nav> tag?" (评论6)
   • 引用： "Tailwind’s recommendation is to, once again, ignore basic coding principles and recommend you duplicate your business logic." (评论8)

3. 生态系统复杂：Tailwind需要结合多种工具和插件才能在大规模项目中有效使用，增加了复杂性。

   • 引用： "Tailwind literally only becomes usable for large scale applications once you have combined base tailwind, postcss, a number of tailwind plugins, custom themes, tailwind-variants, tailwind-merge, clsx/classnames, some custom written typescript typing tools, and a number of editor and linter plugins." (评论28)

中立观点：

1. Tailwind的设计系统：一些评论认为Tailwind的成功在于其设计系统，而非其API或语法。

   • 引用： "people like tailwind not for its API or ergonomics but for its design system." (评论19)
   • 引用： "Tailwind demands the developer who installs it set up a config file that lays out all codebase-wide style constants." (评论30)

2. 与其他工具的对比：Tailwind与CSS-in-JS、Bootstrap等工具的对比引发了讨论，部分开发者认为Tailwind在某些场景下表现更好。

   • 引用： "Tailwind is better than Bootstrap and Bulma and all the other stuff I genuinely tried." (评论13)
   • 引用： "CSS-in-JS is perhaps the worst CSS related invention ever." (评论4)

总结：

Tailwind CSS在提高开发效率和简化样式管理方面得到了广泛认可，但其冗长的类名列表、缺乏CSS继承性以及复杂的生态系统也引发了争议。支持者认为它适合快速开发和团队协作，而反对者则认为它增加了代码复杂性和维护难度。