使用css modules时遇到的问题

手上有一个taro项目的小程序，项目的界面已经完成时并没有引入tailwindcss。因为一些原因服务端迟迟没有接入，于是甲方开始对界面的调整有了想法。当我对界面的样式调整时开始头大了，虽然使用了css modules，通过idea可以直接跳转到对应的样式下，但是并非每一次的跳转都是友好的。

这时候我就在想有什么方案可以快速的来修改这些样式，不想再去因为命名相同的原因，去查找对应的css

开始转向tailwindcss

通过taro官网找到了引入方案，但是并没有全量替换，只是在之后的修改和迭代中使用。因为引入原因是为了节约后续维护和迭代时查找的烦恼，如果现在花时间去把sass全量替换为tailwindcss有点浪费时间。

使用时遇到的问题

并不是所有的写法都是支持的，比如我使用定位居中时用到的-translate-y-1/2时

<div className={classnames(
    '-translate-x-1/2',
    'transform',
)}
>
    123
</div>

得到的结果并没有达到我想要的预期。这种时候还是需要写类名来定义偏移

使用tailwind.config.js

因为害怕后续会有一些颜色的修改，甲方：“我想这个颜色换一下，淡一点，其他地方也统一一下”，这样的情况，所以在使用sass时定义了变量来储存颜色。所以理所当然的也会使用配置来定义颜色

因为是小程序，很多图片资源都是使用的cdn

组件重构

一个自研项目，在开发阶段总会有修修改改，所以避免不了甲方觉得A这块的效果好，B那块也想保持一致这种想法。那么也避免不了我需要将此部分提取出来做成组件供大家使用。

那么第一步肯定就是，复制粘贴，在这个过程中，我觉得tailwindcss最好的使用体验就是，我直接粘贴过来就好，不需要再去搬运css样式。

因为写sass时，习惯将元素内嵌着写

.a {
    .b {
        xxx
    }
}

如果此时需要b和a同级的话，tailwindcss只需要把元素代码剪切到同级的位置就好，而使用sass时还需要去调整css代码。

对于一些争议

感觉争议大的点还是在标签中写那么大一段的类名不好阅读，多个元素使用一种样式需要重复书写。

关于第一条我觉得还行吧，因为我在写法和代码格式上做了处理

一排也只会有一个样式，并且它们都在className这个属性内。没有直接使用className="xx"这样的写法还有一个原因，因为有时候我也会将sass结合，比如在使用线性渐变的时候。这种情况其实很少，所以在后续维护中也可以很方便的修改。

第二条的话，其实在taildwind官网也提到过。

简单来说就是需要提取样式，或者做成组件（样式一样做成组件有何不可）

我在开发中也部分情况做成组件不太合适的情况，处理方案是使用常量

const titleLayout = 'flex items-center justify-between py-[22px]'

部分网友提出的这和写内敛样式又什么区别的疑问，其实官网也有解答

其实更喜欢unocss

对于这两个的对比其他文章写过很多了，对于我来说，在开发中的体验unocss其实更好

    /** tailwindcss */
    <div className="w-[120px]"></div>
    /** unocss */
    <div className="w-120px"></div>

这一点我觉得在开发体验上确实好了很多

我为什么喜欢使用tailwindcss/unocss