【视频】如何正确使用 TailwindCSS

TailwindCSS 是一个争议很大的样式库。

他封装了大量原子化的样式，比如 w-4，表示 width: 1rem；text-gray-500，表示字体颜色为灰色500。如果我们某个节点同时需要两个样式，就是 class="w-4 text-gray-500"。极端一点的例子是这样子的：

很明显，大家的争议点在于：

1. 这么细碎的样式，我为什么不自己写？灵活性还高一些。
2. 这么写跟 inline style 有什么区别？
3. 开发一时爽，维护火葬场。

基本上，发出这些疑问的都是前端。包括我，最初也是这样的想法。但是有一天，我要维护一个老项目，大部分组件都是现成的——引用自某个组件库，或者团队已经写好，只需要调整布局，我发现 TailwindCSS 简直是神器，太方便了。

于是，当我反复看到大家争论该不该用 TailwindCSS 后，决定做一期视频，表达一下自己的态度：

1. 我们做技术，要避免对一项技术做非黑即白的判断，更不应该轻易否定一项技术。同时，使用技术 A 并不代表就要拒绝技术 B。
2. 具体到 TailwindCSS 上，使用它不代表我们从头到尾就要只能用 TailwindCSS；使用其它前端框架也不要求我们绝对不能使用 TailwindCSS。
3. 所以正确的做法是，我们应该使用 TailwindCSS。
4. 项目启动时，使用比较完整全面的前端框架，比如 Element UI、AntDesign，或者基于 TailwindCSS 打造的 DaisyUI；然后辅以 TailwindCSS。这样就可以同时照顾开发效率与维护效率，收获最佳效果。

除了并不会降低开发效率之外，TailwindCSS 还有以下优势：

1. 它跟内联样式有很大的区别，它的优先级很低，意味着我们也可以很容易覆盖、调整。
2. TailwindCSS 样子很好看，直接能画出漂亮的界面。
3. 基于 TailwindCSS 的代码分享很容易，只要复制粘贴 html 即可，在前端工程化日趋复杂的今天，简直是一股清流。
4. 因为文档组织得更好，后端和其它领域的开发者也很喜欢使用 TailwindCSS 替代手写样式。

所以无论如何，我都推荐所有团队所有开发者使用 TailwindCSS。当然，用其它原子化样式框架，比如 UnoCSS 也可以。

如果你有其它意见和建议，欢迎提出讨论。如果你有 B 站账号，恳请三连+关注+转发，感谢。