本篇文章将着重于tailwindcss和unocss在工具属性和使用人群上的讨论。从一个前端开发工具的角度去审视他们为什么受众分明（喜欢的人很喜欢，不喜欢的人很不喜欢）我在此之前看了很多文章，发现这个受众分明并不是说用过的都说好，没用过的都说差。而是互相交叉，深度使用过后的也会厌烦，未曾使用过的也会奉为圭臬。
喜欢的是什么样的一群人
先来说说我自己吧，我平时的工作基本就是使用 antd 来开发，交互稿也是 antd 的交互稿，基本上遇到间隔圆角这样的样式问题我们都会怼UI要求与 antd 一致。我们在开发中很少需要修改元素样式，所以这时候使用原子化的css就是很大的优势，在配合上 vscode 插件，就算是不了解原子类的同学也能很快的接手项目。
我的开发流程应该也是大多数国内开发者的开发流程，所以我认为国内不喜欢原子化css的受众应该具有以下特征：
- 没有使用 UI 框架希望原子化css能直接成为 UI 框架
- 使用了 UI 框架但是需要定制化一些细节或者不能和 UI 掰扯
- 没有使用过原子化css看到tailwindcss官网的宣传图就被劝退的
以上是国内开发者为什么愿意或不愿意使用原子化css的一些看法。下面再来讨论一下为什么国外开发者会愿意使用（不愿意使用的原因其实基本都一样这里不再讨论）原子化css样式。我个人认为对国内原子化css思想影响最大的应当是 anthfu 大佬的一篇文章了：重新构想原子化 css 毕竟使用过原子化css但反对原子化css的人的一个观点是是在unocss之前好多人都没了解过原子化css。那国外的对原子化css影响最大的我觉得就应该是 shadcn-ui 的爆发了，作为2023年前端 start 最多的几个项目之一 shadcn-ui 无疑给原子化css的未来开辟了一条新的道路：无样式组件库 + 原子化css
如果在深入的去探索其实 shadcn-ui 通过一些方案解决了上述三个问题。文章有限不再赘述，各位感兴趣可以看看以下几个关键词：headless-ui、class-variance-authority、shadcn-ui
当然因为一些原因国内工具库的发展在某些领域可能会落后于国际上的主流也是导致国内和国外的情况不太一样的原因，这里大家知道就好
原子化css本质是什么？
unocss和tailwindcss从本质上来说都是前端工具链，虽然unocss号称原子化css处理引擎，但其实其引擎的作用更重要的在于大家可以定义自己的预设，而不是 unocss 和 tailwindcss 能做的事有什么本质上面的区别（至少对于普通使用者来说）所以我们要结合自己的项目去选择使用unocss还是tailwindcss而不是unocss更快就使用unocss，tailwindcss生态更丰富就使用tailwindcss，他们各自有各自的哲学，不是简单的一两个优劣势就能概括
好，我们来说说工具链的本质，工具的本质是服务于人类，工具链的本质是服务于人类的某一个工作线。可以说原子化css工具链就是为了更好的服务前端开发人员开发css样式，这个更好可以是：提效、舒服、轻松、愿意等等
在原子化css工具链的起点便是unocss和tailwindcss他们通过自身提供的原子能力为整条工具链服务，比如当我们需要构建一个样式组件库的时候我们通过tailwindcss+headless-ui结合为我们提效、又比如当我们需要开发一个官网时我们通过unocss + tailwindcss 预设 + daisyui 为我们提速等等
我们在说说原子化是什么意思，原子化就是不可分割的最小状态。放到css中我们来举个例子，如果text-12px 是指在设置字体为12px这个行为中 { font-size: 12px } 不可继续分割。同样如果你想实现一个样式，不管他的代码有多少行，只要他不可继续被分割就可以被归纳做为一个原子类
.text-12px { font-size: 12px }
原子化的好处是什么呢？开发的时候我们都说低耦合高内聚，其核心就需要原子化，当功能原子化后就自然实现了低耦合，而原子化的功能只需要组合起来就是所谓的高内聚了。
在原子化css的反对者中有一部分说原子化的css导致css太长了不利于理解、不利于阅读、新手不友好，而对这一观点反对的声音都在说 apply，其实就是说原子化css不仅能实现低耦合还能实现高内聚，尤其当cva这样的工具出现过后高内聚的能力将更加出众（也就是说可以把原子化css玩出花来）
在上文中我提到了 daisyui 这就是一个基于原子化css工具衍生出来的一个聚合css一个花里胡哨的按钮你只需要定义 .btn 即可，一个表格你只需要 .table 即可
原子化css的未来
现阶段其实我们大可不必去争论原子化css是好是坏。作为工具，能够提效、能让你开发时更开心才是最重要的，我们需要做的是尽量减少在工作中遇到哪些让人不开心的使用方式，比如在有高度定制UI框架的项目中使用tailwindcss
原子化css的高光一定是在未来，随着前端的不断发展，我们对性能、对开发效率的追求一定会越来越高，届时新兴的框架便会取代老旧的框架（当然也可能因为自己作死导致市占率下降），但是与人们对框架发展的期望不同的是UI组件往往慢于框架本身的发展，毕竟一个前景未定的框架谁会花费心思去做适配呢？这时候原子化css的优势便体现出来，他是框架无关的一个技术，而且经过一段时间的发展daisyui这类的聚合框架也肯定会在更上一层楼，再加上前端标准的进步，很多组件不需要封装也能通过原生组件实现比如 details、dialog 等
虽然本篇文章干货不是那么多，但是我觉得AI时代对读者更负责任的文章是涉及面，所以本篇文章的关键字很足。如果你也这么认为，请关注作者，一定为大家带来更多知识面的，富含个人思考的文章。
---- 如果可以PUA自己上班也是个不错的能力
链接补充：
