我2年多围绕 tailwindcss 生态的开源之路

前言

大抵 2021 年的时候，我接触到了 tailwindcss, 那时候 windicss 还没死，托尼小哥的 unocss 还没发布出来。

当时就觉得这东西很不错啊，原子化的样式生成器，所写即所得，可读性也好，还能 shake 掉用不到的样式，同时也可以通过插件和预设提炼项目公共的样式部分。

于是开始在自己的项目中用了起来，后来逐渐用到了公司的新项目里去。

当然tailwindcss也不是银弹，也有许多无法满足的需求，需要进行额外的开发，于是为了解决那些问题，围绕着它的生态，我陆陆续续开发了:

预设

tailwindcss-miniprogram-preset (小程序预设，已废弃)

tailwindcss-rem2px-preset (rem转px/rpx预设)

小工具

inline-tailwindcss (内联tailwindcss)

tailwind-css-variables-theme-generator (css 变量生成器)

转化器

weapp-tailwindcss (小程序使用 tailwindcss 全方面解决方案官网链接 )

tailwindcss-mangle (tailwindcss 混淆器)

UI 组件库

icestack (CSS UI 库生成器，可以生成类似 daisyui 这样的库官网链接)

开源起始

开发了这么多库，自诩已经对 tailwindcss 运作原理以及源码滚瓜烂熟了，不过我的开源最初并不是从 tailwindcss 开始的。

早前工作的时候，我经常使用 serverless 相关的技术来部署 nodejs 项目，尤其常用 serverless framework 来进行部署。

当时也主要是兴趣使然，也挺想要加入某一个开源生态的，于是就选中了它，并围绕着它开发了很多的垃圾 npm 包。

后来你也知道的 serverless 在国内一直是不温不火的。而我从之前那家公司离职之后也找不到下一家有这个场景的了，遂作罢。

后面也陆续发布了一些 vue 相关的包和UI组件，不过这种前端圈太卷了，vue团队里就有几个卷王(你知道我重点想说的是谁)，每每看他们代码总是觉得望尘莫及，同时也很羡慕他们。

在接触到了 tailwindcss 后，在很多项目里开始尝试使用它，但是我自己的项目很多都是小程序，于是就衍生出了一个想法，想做一个 tailwindcss 小程序兼容版本，于是我的 tailwindcss 开源之旅正式启程了！

上下求索

为了达到tailwindcss在小程序里使用的目标，一开始我尝试使用 tailwindcss preset 的方式去解决问题，于是就开发了 tailwindcss-miniprogram-preset。

然而，它并没有给我带来很好的开发体验。核心原因在于 preset 的功能太弱了，它无法去转化用户写的代码，只能让用户手动去转义，部分写法与原始的 tailwindcss 不同，这造成了比较大的心智负担，更不用说它还阉割了许多 tailwindcss 本身的功能。

在阅读许多的文档之后，于是我打算写一个 webpack plugin 在编译时，来同时转义用户的所有代码，这就是 weapp-tailwindcss-webpack-plugin 的雏形了。

开发之始

可是，当时的我就只会写一些 vue/react/nodejs 的业务代码，webpack plugin,vite plugin,babel plugin,postcss plugin 个个都不会写。而且我还非要打肿脸充胖子，要用 typescript 来写，还要用 rollup 去打包。

所以果不其然，受限于自身的水平，写的非常痛苦。那时候经常下班回到家就开始在 Github 上直接去搜索类似的代码，看看是怎么写的。然后就是不断的调试，理解。抽空我还去学习了一下 jest 并设计了一些单元测试用例用来回归测试。

终于经过不断的调试和测试，我在 2022/2/3 号终于发布了 weapp-tailwindcss-webpack-plugin 的第一个版本！当然那时候还只支持 uni-app cli vue2 项目，因为我自己的项目就是这个搭建的。

继续突破

不过当时 1.x 版本有个大问题没有解决，那就是 postcss 插件应该如何和 webpack plugin 进行通信的问题。因为当时，插件只能转化产物中 wxml，wxss 和部分 js 动态的部分，少部分类似于:

const className = 'bg-[#123456]'

<>
  <div className={className}>无法被检测</div>
  <div className="bg-[#654321]">可以被检测</div>
<>

这种在 jsx 代码外的声明的是无法被插件检测到的，除非插件能从 postcss 里直接拿到上下文。于是我研究了一下 tailwindcss 的源码，用了不太优雅的方式解决了这个问题。

随即 2.x 版本发布，而用 tailwindcss 开发小程序的人也渐渐变多了，后面逐渐出现了 vite,glup 插件和暴露原始的 Nodejs API 做二次封装的需求。

把这些功能实现之后，我感觉项目名称 weapp-tailwindcss-webpack-plugin 已经有点不妥了，索性改名叫 weapp-tailwindcss，同时也发布了对应的 npm 包

顺便看了一些文章和其他开源项目，把 Github 的 CI/CD 给加上了，同时还顺手搭建了个粗糙的官网。现在做的也不过是根据需求把用户想要的功能填入 weapp-tailwindcss 肚子里。

兴趣还是生计？

当然一开始开发肯定是出自于兴趣，作为生计是我想要达到的目标，不过我知道，现在自己还远远达不到。开发这些东西可能能帮到一些人，也有一些用户会给我些赞助，这些总共加起来应该还不到我一天的工资。

当然我也借助它认识了国内许许多多的开源朋友，大家都是为爱发电，所以心理上早有准备。而我也很高兴我可以和开发朋友们吹牛说: 看！这是我开发的，厉害吧！

当然我也是一个俗人，也需要激励。你的 star 和赞助对我来说都是莫大的鼓励，假如你有 Github 账号，给我点个免费的 star 可好？

收获和结语

实际上现在回过头想想，自己不过只是做了一件很小的事情，我的那些开源项目又不是那种有开创性的全新项目，而是寄宿于某一个生态，跟着生态潮涨潮落，早晚有一天会被遗弃。

不过这段旅程中，我各个方面还是收获了很多，起码我再去面试的时候，人家问我懂不懂 ast，写不写 plugin，我能罗列展示一堆东西。

以上就是一条开源小杂鱼近2年一些感悟，如果你能把这篇流水账一样的文章看到这，我也对你表示感谢。

最后，希望中国开源事业越来越好！

附录

我的Github

weapp-tailwindcss

icestack

我2年多 tailwindcss 生态的开源之路