10年老前端吐槽Tailwind CSS：是神器还是“神坑”？

作为一个老前端人比大家虚长几岁，前端技术的飞速发展，从早期的 jQuery 到现代的 React、Vue，再到 CSS 框架的演变。最近几年，Tailwind CSS 成为了前端圈的热门话题，很多人称它为“神器”，但也有不少人认为它是“神坑”。今天，我就从实际项目经验出发，吐槽一下 Tailwind CSS 的弊端。

HTML 代码臃肿，可读性差

例如：

<div class="p-4 bg-white rounded-lg shadow-md text-gray-800 hover:bg-gray-100">

  Content

</div>

以至于前端同学前来吐槽，这和写style有个毛线区别。
虽然tailwind提供了@apply方法，将常用的实用类代码提取到css中，来减少html的代码量

.btn {
@apply p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600;

}

可以一个大型项目样式复杂，常常看到这样的场景：

.btn1 {
@apply p-4 bg-blue-500 text-white rounded-lg hover:bg-blue-600;

}
.btn2 {
@apply p-6 bg-blue-500 text-blue rounded-lg hover:bg-blue-600;

}
.btn3 {
@apply p-8 bg-blue-500 text-red rounded-lg hover:bg-blue-600;

}
.btn4 {
@apply p-10 bg-blue-500 rounded-lg hover:bg-green-600;

}

读起来都费劲。

增加了前端同学的学习成本

开发是必须学习大量的tailwind的实用类，并且要花时间学习这些命名规则，例如：

• 
  
• p-4 是 padding，m-4 是 margin。
  
• text-sm 是小字体，text-lg 是大字体。
  
• bg-blue-500 是背景色，text-blue-500 是文字颜色。
  

国内的项目大家都知道，不是在赶工期，就是在赶工期的路上，好多小伙伴开发的时候直接就上style了。

当然这样也有好处，能使用JIT模式，按需生成css，减少文件的大小。避免了以前项目中好多无用的css。

动态样式支持有限

有时候需要动态生成的类会导致错误，例如：

<div class="text-{{ color }}-500 bg-{{ bgColor }}-100">
Content

</div>

如果color被复制为green，但是系统并没有定义 text-green-500 这个类。让项目变得难以调试和维护。

总结

Tailwind CSS 是一把双刃剑，它既能为开发带来极大的便利，也可能成为项目的“神坑”。作为开发者，我们需要根据项目需求，合理使用 Tailwind，并通过一些最佳实践规避它的弊端。希望这篇文章能帮助你在项目中更好地使用 Tailwind CSS，享受它带来的便利，同时避免踩坑！

如果你有更多关于 Tailwind CSS 的问题或经验分享，欢迎在评论区留言讨论！ 😊