前言
近两年在社交网络上经常看到Tailwind CSS被提起，关于“原子化CSS”、“Tailwind CSS”、“Windi CSS”、“UNOCSS”等话题也是层出不穷。一开始我还是处于观望状态，然而前几天发现Tailwind CSS已经68.1K的🌟了，强如Express累积这么多年也才60.8K。
不禁让我好奇了起来，会不会跟Svelet、Solid一样，评价就是这东西真是太强了、太好用了！让他用到公司项目里？先观望观望。
既然如此，那我就从需求出发，直接撸一个页面比较一下，下图为本次页面设计稿。
要求：像素级还原。
html + css
实现设计稿代码
模拟迭代场景：修改商品总数样式
通过调试工具可以定位到class为total，去代码中定位到对应的代码做调整。
评价
无功无过，SPA项目避免class重复用cssModule也都能解决。
优点：
- 可读性高。
缺点：
- 随着项目越来越大，冗余代码会越来越多，复用率高低与开发者的节操紧密相关。
- 需要命名，众所周知命名是开发过程中难度最大的环节之一，但命名好也就说明可读性高，真是把双刃剑。
- 有人说代码分散，不够聚焦（这一点我不太赞同，因为我一般都是分屏，半屏jsx半屏样式）。
Tailwind CSS
实现设计稿代码
模拟迭代场景：修改商品总数样式
通过调试工具，要定位到代码中具体调整的节点有一定的难度。
翻了文档发现有个apply的方法，马上试一下！
wow，可读性不错，很快能定位到对应的元素，但是复用率这个优点怎么没了，WTF！
评价
emm😐，这可读性似乎有点差，而且现在只是实现一个小的列表项而已，如果内容更多可能更复杂。总不能双标行内样式就是💩，class一堆就是✅。
优点：
- 更聚焦，复用率极高。
- 即插即拔，删除组件样式会跟着删除，几乎0成本降低冗余代码的可能性。
- 提供了大量的样式标准，更像是颗粒度更细的
bootstrap。
缺点：
- 可读性不高。
- 需要学习成本，虽然难度不大。
- 虽然不需要命名，但如果出现tailwind.css不满足需求，要和css混合写的情况，可读性会不会更感人了。
总结
Tailwind CSS并不是什么项目都适合，整体感受上更适合做无UI参与的项目，给你提供了一大堆标准，不需要再纠结这个圆角是3px还是4px，产品说的字体大一点到底多少px，可以理解是一个颗粒度极细的bootstrap。Tailwind CSS更像是我们以前全局写的一些基础样式，比如clearfi、m-t-5、p-t-10这些，只是我们以前需要在公共样式里面先预先写好，现在是通过postcss直接编译出来，即插即拔。- 如果是做有设计稿的产品，需要长期迭代，并且UI有像素眼的话，目前还是不推荐用。
- 如果可以做到html里面是自定义的class，css里面实用apply，在编译的时候再将对应的class加到对应的html里会不会更舒服呢。
以上就是我的个人见解，平时做的移动端项目比较多，经常纯手撸页面，有好用的轮子肯定是想用的，只是看到比较多的文章都是无脑吹，自己试了一下觉得还是需要分场景。当然有什么不同的看法也欢迎讨论。
