我不推荐 Tailwind CSS
Tailwind CSS 让前端开发者意见分裂:一些人认为它的实用优先类是驯服庞大、混乱样式表的优雅方式,也能让组件自包含,并便于在大型团队中复用。批评者则认为它让标记臃肿、掩盖语义、削弱结构与设计的分离,最终只是重新抽象了一层 CSS,但你仍然得理解底层语言。许多人得出的结论是,“正确”的选择高度依赖上下文——项目规模、团队技能和工具链——而现代原生 CSS、CSS Modules、BEM 或 UI 库等替代方案,往往更适合长期维护。
总体语气
- 讨论高度两极分化,而且重复了过去关于 Tailwind 的争论;很多人称之为挑剔细节式争论(bikeshedding)。
- 一些人指出 Tailwind 持续流行,说明它确实解决了真实问题;另一些人则认为它的传播是前端领导力薄弱或“slop”的表现。
Tailwind 的被感知优势
- 加快实现速度,尤其适合不想设计 CSS 架构或命名方案的开发者。
- 实用类让组件/页面自包含;修改不太会在别处引发级联回归。
- 可在 Tailwind 配置中集中设计一致的设计系统(颜色、间距、圆角、暗色模式等),再通过工具类复用。
- 通过避免分裂的 BEM 约定和 CSS “意大利面条”式代码,它在大型团队和代码库中表现良好。
- 很容易在项目之间复制/粘贴元素,并让它们看起来完全一致。
- 自动补全、IDE 工具和 AI 辅助让这些类名易于记忆和使用。
主要批评
- 标记变得嘈杂且难以阅读;class 属性编码了一种迷你语言,而不是使用语义化类名。
- 打破或模糊了“结构 vs 样式”的分离;感觉像是在倒退回内联样式。
- 除了 CSS 之外,还必须学习 Tailwind 的词汇;有经验的 CSS 开发者表示这反而拖慢了他们。
- 级联/优先级问题(例如冲突的工具类)削弱了“局部推理”,于是又催生了 tailwind-merge 之类的附加工具。
@apply的使用存在争议:有人认为为了保持可控它是必要的,另一些人则说这违背了 Tailwind 的目的。- 鼓励临时性的单次取值(
p-[13px]、混用色阶),因此一致性仍然取决于开发者自律。
CSS、组件与替代方案
- 一些人认为 CSS 本身(以及 HTML 的模型)才是根本问题;Tailwind 只是众多务实应对方式之一。
- 另一些人更偏好现代 CSS 搭配变量、嵌套、作用域样式、CSS Modules 或 BEM,通常再结合组件框架一起使用。
- 有些人会拆分职责:用 CSS 或设计系统处理 token 和语义;只在布局/排版上使用类似 Tailwind 的工具类。
- 少数人指出,随着 LLM/agent 生成 CSS,Tailwind 的主要优势(快速手写)未来可能没那么重要。
背景与“合适工具”观点
- 许多人最终认为是否适合取决于上下文:它适合大型团队、原型以及工具类需求重的 UI;对于小型、设计良好、组件范围明确的 CSS 代码库来说,吸引力就没那么强。