我可能是全中國(guó)最了解 tailwindcss 的開發(fā)者
前言
首先著淆，我要對(duì)起這樣的標(biāo)題感到抱歉湃累，本來想起一個(gè) "我的2年開源之旅" 這樣的標(biāo)題，但是我知道迈套，這種標(biāo)題太普通，肯定就沒啥人感興趣看碱鳞，就像我寫的大部分文章一樣桑李。
于是索性做了一回標(biāo)題黨(壞笑～)。不過這個(gè)標(biāo)題也不是空穴來風(fēng)窿给，我也確實(shí)比較了解 tailwindcss贵白，圍繞著它的生態(tài)，我陸陸續(xù)續(xù)開發(fā)了:
預(yù)設(shè)
tailwindcss-miniprogram-preset (小程序預(yù)設(shè)崩泡，已廢棄)
tailwindcss-rem2px-preset (rem轉(zhuǎn)px/rpx預(yù)設(shè))
小工具
inline-tailwindcss (內(nèi)聯(lián)tailwindcss)
tailwind-css-variables-theme-generator (css 變量生成器)
轉(zhuǎn)化器
weapp-tailwindcss (小程序使用 tailwindcss 全方面解決方案 官網(wǎng)鏈接 )
tailwindcss-mangle (tailwindcss 混淆器)
UI 組件庫
icestack (CSS UI 庫生成器禁荒，可以生成類似 daisyui 這樣的庫 官網(wǎng)鏈接)
開源起始
開發(fā)了這么多庫，自詡已經(jīng)對(duì) tailwindcss 運(yùn)作原理以及源碼滾瓜爛熟了角撞，不過我的開源最初并不是從 tailwindcss 開始的呛伴。
早前工作的時(shí)候勃痴，我經(jīng)常使用 serverless 相關(guān)的技術(shù)來部署 nodejs 項(xiàng)目，尤其常用 serverless framework 來進(jìn)行部署磷蜀。
當(dāng)時(shí)也主要是興趣使然召耘，也挺想要加入某一個(gè)開源生態(tài)的，于是就選中了它褐隆，并圍繞著它開發(fā)了很多的垃圾 npm 包(笑～)污它。
后來你也知道的 serverless 在國(guó)內(nèi)一直是不溫不火的。而我從之前那家公司離職之后也找不到下一家有這個(gè)場(chǎng)景的了庶弃，遂作罷衫贬。
后面也陸續(xù)發(fā)布了一些 vue 相關(guān)的包和UI組件，不過這種前端圈太卷了歇攻，vue團(tuán)隊(duì)里就有幾個(gè)卷王(你知道我重點(diǎn)想說的是誰)固惯，每每看他們代碼總是覺得望塵莫及，同時(shí)也很羨慕他們缴守。
后來在大抵 2021 年的時(shí)候葬毫，我接觸到了 tailwindcss, 那時(shí)候 windicss 還沒死，托尼小哥的 unocss 還沒發(fā)布出來屡穗。
當(dāng)時(shí)就覺得這東西很好啊贴捡，原子化的樣式生成器，所寫即所得村砂，可讀性好烂斋，還能 shake 掉用不到的樣式，同時(shí)也可以通過插件和預(yù)設(shè)提煉項(xiàng)目公共的樣式部分础废。
于是在很多自己的項(xiàng)目里開始嘗試使用它汛骂，但是我自己的項(xiàng)目很多都是小程序，于是就衍生出了一個(gè)想法评腺，想做一個(gè) tailwindcss 小程序兼容版本帘瞭，于是我的 tailwindcss 開源之旅正式啟程了！
上下求索
為了達(dá)到tailwindcss在小程序里使用的目標(biāo)歇僧，一開始我嘗試使用 tailwindcss preset 的方式去解決問題图张，于是就開發(fā)了 tailwindcss-miniprogram-preset。
然而诈悍，它并沒有給我?guī)砗芎玫拈_發(fā)體驗(yàn)祸轮。核心原因在于 preset 的功能太弱了，它無法去轉(zhuǎn)化用戶寫的代碼侥钳，只能讓用戶手動(dòng)去轉(zhuǎn)義适袜，部分寫法與原始的 tailwindcss 不同，這造成了比較大的心智負(fù)擔(dān)舷夺，更不用說它還閹割了許多 tailwindcss 本身的功能苦酱。
在閱讀許多的文檔之后售貌，于是我打算寫一個(gè) webpack plugin 在編譯時(shí)，來同時(shí)轉(zhuǎn)義用戶的所有代碼疫萤，這就是 weapp-tailwindcss-webpack-plugin 的雛形了颂跨。
開發(fā)之始
可是，當(dāng)時(shí)的我就只會(huì)寫一些 vue/react/nodejs 的業(yè)務(wù)代碼扯饶，webpack plugin,vite plugin,babel plugin,postcss plugin 個(gè)個(gè)都不會(huì)寫恒削。而且我還非要打腫臉充胖子，要用 typescript 來寫尾序，還要用 rollup 去打包钓丰。
所以果不其然，受限于自身的水平每币，寫的非常痛苦携丁。那時(shí)候經(jīng)常下班回到家就開始在 Github 上直接去搜索類似的代碼，看看是怎么寫的兰怠。然后就是不斷的調(diào)試梦鉴，理解。抽空我還去學(xué)習(xí)了一下 jest 并設(shè)計(jì)了一些單元測(cè)試用例用來回歸測(cè)試揭保。
終于經(jīng)過不斷的調(diào)試和測(cè)試尚揣，我在 2022/2/3 號(hào)終于發(fā)布了 weapp-tailwindcss-webpack-plugin 的第一個(gè)版本！當(dāng)然那時(shí)候還只支持 uni-app cli vue2 項(xiàng)目掖举，因?yàn)槲易约旱捻?xiàng)目就是這個(gè)搭建的。
更多的平臺(tái)
后來我興致勃勃的去知乎等等平臺(tái)去發(fā)文章娜庇，介紹我這個(gè)項(xiàng)目塔次。吸引來了一些用戶來使用，隨即名秀，多框架的問題接踵而至励负。
那時(shí)候小程序開發(fā)框架 uni-app,taro,rax,kbone,mpx,remax 等等各立山頭，都有一定的用戶基數(shù)匕得，它們各自之間的編譯方式继榆，產(chǎn)物都不同，如何去兼容它們呢汁掠？
為此我創(chuàng)建了大量各個(gè)框架的示例進(jìn)行測(cè)試略吨，測(cè)試過程中也做了很大的努力去兼容所有的框架。比如 uni-app 和 taro 的產(chǎn)物就有很大的不同考阱，要去找到一個(gè)通用的方式翠忠，在 webpack 恰當(dāng)?shù)臅r(shí)機(jī)去進(jìn)行轉(zhuǎn)化。各個(gè)框架之間也還有 webpack4/5乞榨，postcss7/8 版本的不同秽之，為此也要去兼容等等当娱。
解決了這些問題之后，我為此還創(chuàng)建了 e2e 測(cè)試考榨，來保證每個(gè)框架的示例都是可運(yùn)行跨细，且產(chǎn)物在預(yù)期內(nèi)的。
就這樣縫縫補(bǔ)補(bǔ)的過了1年左右河质，后來也比較懶冀惭，用戶沒提 issue 就懶得去更新了。
繼續(xù)突破
不過當(dāng)時(shí) 1.x 版本有個(gè)大問題沒有解決愤诱，那就是 postcss 插件應(yīng)該如何和 webpack plugin 進(jìn)行通信的問題云头。因?yàn)楫?dāng)時(shí)，插件只能轉(zhuǎn)化產(chǎn)物中 wxml淫半，wxss 和部分 js 動(dòng)態(tài)的部分溃槐，少部分類似于:
const className = 'bg-[#123456]'
<>
<div className={className}>無法被檢測(cè)</div>
<div className="bg-[#654321]">可以被檢測(cè)</div>
<>
這種在 jsx 代碼外的聲明的是無法被插件檢測(cè)到的，除非插件能從 postcss 里直接拿到上下文科吭。于是我研究了一下 tailwindcss 的源碼昏滴，用了不太優(yōu)雅的方式解決了這個(gè)問題。
隨即 2.x 版本發(fā)布对人，而用 tailwindcss 開發(fā)小程序的人也漸漸變多了谣殊，后面逐漸出現(xiàn)了 vite,glup 插件和暴露原始的 Nodejs API 做二次封裝的需求。
把這些功能實(shí)現(xiàn)之后牺弄，我感覺項(xiàng)目名稱 weapp-tailwindcss-webpack-plugin 已經(jīng)有點(diǎn)不妥了姻几，索性改名叫 weapp-tailwindcss，同時(shí)也發(fā)布了對(duì)應(yīng)的 npm 包
順便看了一些文章和其他開源項(xiàng)目势告，把 Github 的 CI/CD 給加上了缸夹，同時(shí)還順手搭建了個(gè)粗糙的 官網(wǎng) 】恼铮現(xiàn)在做的也不過是根據(jù)需求把用戶想要的功能填入 weapp-tailwindcss 肚子里。
興趣還是生計(jì)？
當(dāng)然一開始開發(fā)肯定是出自于興趣研侣，作為生計(jì)是我想要達(dá)到的目標(biāo)苛让，不過我知道啤贩，現(xiàn)在自己還遠(yuǎn)遠(yuǎn)達(dá)不到唯欣。開發(fā)這些東西可能能幫到一些人，也有一些用戶會(huì)給我些贊助遗遵，這些總共加起來應(yīng)該還不到我一天的工資萍恕。
當(dāng)然我也借助它認(rèn)識(shí)了國(guó)內(nèi)許許多多的開源朋友，大家都是為愛發(fā)電车要，所以心理上早有準(zhǔn)備雄坪。而我也很高興我可以和開發(fā)朋友們吹牛說: 看！這是我開發(fā)的，厲害吧维哈！
當(dāng)然我也是一個(gè)俗人绳姨，也需要激勵(lì)。你的 star 和贊助對(duì)我來說都是莫大的鼓勵(lì)阔挠，假如你有 Github 賬號(hào)飘庄，給我點(diǎn)個(gè)免費(fèi)的 star 可好？
收獲和結(jié)語
實(shí)際上現(xiàn)在回過頭想想购撼，自己不過只是做了一件很小的事情跪削，我的那些開源項(xiàng)目又不是那種有開創(chuàng)性的全新項(xiàng)目，而是寄宿于某一個(gè)生態(tài)迂求，跟著生態(tài)潮漲潮落碾盐，早晚有一天會(huì)被遺棄。
不過這段旅程中揩局，我各個(gè)方面還是收獲了很多毫玖，起碼我再去面試的時(shí)候，人家問我懂不懂 ast凌盯，寫不寫 plugin付枫，我能羅列展示一堆東西。
在今年8月份的時(shí)候驰怎，由于公司欠薪長(zhǎng)達(dá)3月阐滩，我和一些同事離職了，想想也是挺遺憾的县忌，當(dāng)然不是為公司感到遺憾掂榔，而是我在那里遇到了非常好的 Boss，頂住上面的壓力為我們著想症杏，不像我以前遇到的大部分都是瘋狂壓榨的類型衅疙。可惜由于資金流問題鸳慈，團(tuán)隊(duì)散了。而現(xiàn)在也已經(jīng)12月了喧伞，在我休息了將近4個(gè)月之后走芋，我也要繼續(xù)去找工作來養(yǎng)活自己了。
以上就是一條開源小雜魚近2年一些感悟潘鲫，如果你能把這篇流水賬一樣的文章看到這翁逞，我也對(duì)你表示感謝。
最后溉仑，希望中國(guó)開源事業(yè)越來越好挖函！
