介绍
tailwindcss 插件
# 前提
最近看了一点设计上的东西，打算做点小工作，我打算先做一个tailwindcss的插件，再处理unocss(主要是我没有看到unocss预设的指引，估计要找个现成的预设先偷学一下) 实质上这有两个部分，一个部分就是多个种类的风格，比如玻璃拟态，新拟态等，第二个是基础组件，因为不太可能每一种组件都做，那样工作量太大，而且以原子类css没有办法像正常那样去封装组件，更多的是依赖对原生的封装，说白了就是对button和input原始样式的覆盖与重写 基于这两个部分做排列组合就好，比如某个风格+某个组件封装一个样式。实际上还有一个主题的问题，比如暗色模式等，然后就是三个部分的排列组合
其实还有一些工具的部分，比如我想做一个五阶段的配色模式，即Google的配色标准，不过我看了一下daisyui已经实现过了，我就不做了
这里面存在一些难点，比如风格类大量使用了shadow，那么这个shadow的数值应该怎么定，这个size应该定多少，在不知道用户使用的元素尺寸的前提下，这个东西不好处理，由于阴影长度随元素的变化并非线性，所以百分比的思路不可行，那就只能依赖断点。此外，各种风格的因变量各不相同，有可能有多个因变量，这个标准更加难搞。再加上风格中，有些变化应属于默认变化，比如新拟态中，active伪类的状态和常规状态应该是相反，即凹凸，那这个伪类状态由用户做还是由插件完成也是一个麻烦
（new）其实不要想着太高的自由度，直接写死就好，够用了，如果非要考虑复用，那就用css变量，tailwind内部的诸如
text-opacity-10就是这么实现的
# 最新进展
额，上面计划的我就做了一小时就睡了。。不过我现在发现了一些更符合需求的东西，还是google的m3 配色标准，它有配套的css工具（可以理解为提供一些css变量，和一些预设类型的类名--有粒度大的和小的）这个和tailwindcss契合度很高，而且它可以动态根据图片，自定义颜色去计算色阶，更新css变量，即做到真正的动态主题，可以用户自定，可以开发人员/业务人员定（放在一个接口就行）,完全自由，而不是只有少量主题选择，也不需要设计人员提供审美上的支持，它会自动计算出符合美感的配套色！
又是一个可以节省大成本的好工具，目前我用官方提供的开源库的效果和Google的web体验版效果有点偏差，不过不影响使用的
# 为什么不用scss/less
首先，如果是自己写，尤其是在库里面，没有问题，而且开发起来，更有章法，思路更清楚。但是！在阅读他人代码时，成本会高很多，用标准css，只需要理解键值对即可，用css预处理语言，就需要理解程序了（参照我之前写的那篇文章，预处理语音给css带来了编程语言功能），此外，加上类名的负担，mixin,变量名负担，引用的负担，比如：我只想知道这个dom的样式，但我先要找dom的classname，再在vue的style里找一部分，再找对应的mixin，再找对应的变量名，再找全局样式补充，这大概率分散在数个文件内！我根本没法第一时间知道这个dom它全部的样式
项目够大的时候，命名就已经很乱了，而且有些类名明明不起任何js功能，但在类名中却有对功能的描述，如bem，vue开发中，不在需要通过classname获得dom,那我使用类名完全是为了样式，那类名就应该全是样式的描述，而不是功能描述。 低代码为什么一直广受诟病，因为不具备编程能力的人，是没有办法理解的，那就更别提操作了，用scss本质上既赋予了编程体验，也赋予了编程的难度