一篇在Hacker News发布的技术评论指出,尽管Tailwind CSS广受欢迎,但在中大型项目中存在多个问题。[1]作者列举了八项主要缺点,其中包括Tailwind拥有数千个工具类需要开发者学习掌握,以及在HTML中嵌入大量类名破坏了结构与设计的分离原则。[1]
命名的不一致性也被视为关键问题。[1]作者指出items-center、justify-center、text-center和place-content-center等类名的区别不够直观。[1]此外,任意值功能如w-[347px]、text-[#1a2b3c]等被认为破坏了设计系统的一致性。[1]
评论进一步指出,现代原生CSS已具备Tailwind提供的许多功能,包括级联层(@layer)、原生嵌套、CSS变量、:has()选择器、容器查询和color-mix()等。[1]值得注意的是,Tailwind创始人Adam Wathan曾承认@apply"基本上只是用来骗人的",并表示如果重新开发Tailwind将不会包含此功能。[1]此外,Tailwind类的优先级由编译器生成顺序决定而非HTML中的顺序,这使得标记可能产生误导。[1]作者建议开发者在选择使用前充分学习CSS基础知识。[1]
A technical review published on Hacker News raises substantial concerns about Tailwind CSS, despite the framework's widespread adoption in web development.[1] The author identifies eight major drawbacks that emerge particularly in medium to large projects, arguing that developers should carefully weigh these limitations before adopting the utility-first approach.[1]
The critique centers on several architectural and practical issues. Tailwind requires mastery of thousands of utility classes, creating a significant learning burden.[1] More fundamentally, the framework embeds extensive class names directly into HTML markup, violating the principle of separating structure from design.[1] The naming conventions lack intuitive clarity—for instance, items-center, justify-center, text-center, and place-content-center serve different purposes but their distinctions remain ambiguous to developers.[1] Additionally, arbitrary value syntax such as w-[347px] and text-[#1a2b3c] undermines design system consistency by allowing ad-hoc styling outside predefined values.[1]
The author further contends that modern native CSS has narrowed the gap with Tailwind. Contemporary CSS now natively supports cascade layers (@layer), native nesting, CSS variables, the :has() selector, container queries, and color-mix() functions—capabilities that were previously associated with utility frameworks.[1] Notably, Tailwind founder Adam Wathan acknowledged that the @apply directive "basically only exists to trick people" and stated it would be excluded from a redesigned version of the framework.[1] A technical inconsistency also exists in how class precedence is determined by the compiler's generation order rather than the sequence in HTML, potentially creating misleading markup.[1] The article recommends that developers strengthen their foundational CSS knowledge before committing to Tailwind CSS adoption.[1]