我可能是全中国最了解 tailwindcss 的开发者

2023-12-15 23:30:16

我可能是全中国最了解 tailwindcss 的开发者

我可能是全中国最了解 tailwindcss 的开发者

前言

首先，我要对起这样的标题感到抱歉，本来想起一个 "我的2年开源之旅" 这样的标题，但是我知道，这种标题太普通，肯定就没啥人感兴趣看，就像我写的大部分文章一样。

于是索性做了一回标题党(坏笑～)。不过这个标题也不是空穴来风，我也确实比较了解 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团队里就有几个卷王(你知道我重点想说的是谁)，每每看他们代码总是觉得望尘莫及，同时也很羡慕他们。

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

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

于是在很多自己的项目里开始尝试使用它，但是我自己的项目很多都是小程序，于是就衍生出了一个想法，想做一个 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，我能罗列展示一堆东西。

在今年8月份的时候，由于公司欠薪长达3月，我和一些同事离职了，想想也是挺遗憾的，当然不是为公司感到遗憾，而是我在那里遇到了非常好的 Boss，顶住上面的压力为我们着想，不像我以前遇到的大部分都是疯狂压榨的类型。可惜由于资金流问题，团队散了。而现在也已经12月了，在我休息了将近4个月之后，我也要继续去找工作来养活自己了。

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

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

附录

我的Github

weapp-tailwindcss

icestack

文章来源:https://blog.csdn.net/qq_33020601/article/details/135026549
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！

我可能是全中国最了解 tailwindcss 的开发者