tailwindcss jit 与各大框架的融合

把 tailwindcss JIT 思想带入小程序开发吧！

书接上文 让小程序开发进入 tailwind jit 时代!

到今天为止已经，距离第一版已经发布了 19天了。

这 19 天内，在许多人的帮助和支持下，添加了许多的 feature 和修复了许多的 bug.

现在到 1.1.5 版本的发布 weapp-tailwindcss-webpack-plugin，已经不只是一个 webpack-plugin 了。接下来让我们大概看一下有哪些改进吧。

适配了更多的框架

原先设计的时候，主要是给 uni-app 的 webpack 打包版本设计的。随着群友和一些使用者的需求，陆陆续续添加了:

• uni-app-vite
• taro (react/vue2/3)
• remax (react)
• rax (react)

框架支持。而且也补充了更多的 使用方式 和 示例项目.

<h3 id=“uni-app”>uni-app (vue2/3)</h3>

Demo 项目

<h3 id=“uni-app-vite”>uni-app for vite (vue3)</h3>

Demo 项目

<h3 id=“taro”>taro (React/vue2/3)</h3>

React Demo 项目

vue2 Demo 项目

vue3 Demo 项目

<h3 id=“remax”>remax (react)</h3>

Demo 项目

<h3 id=“rax”>rax (react)</h3>

Demo 项目

当然，未来肯定是要支持更多的框架以及原生的写法的。

毕竟 tailwindcss 这种自动生成 css 的框架，是一种非常优秀的思想。非常的灵活多变，是非常值得推广的，能够精炼的对 css 进行提炼，自由的组合。

这让我想起了 js函数式编程，用函数来生成函数。而且 tailwindcss 配合上最新的 dart sass 开发体验非常好。

现在的 sass 也提倡编程 @use 'sass:meta' as M; 这类的，大大提升了样式的可编程性。

简单的原理

由于小程序的 class 不支持除了 _ 和 - 以外的特殊符号和诸多选择器，而 tailwindcss jit 又是特殊符号一大堆。

于是在不改变 tailwindcss 默认 jit engine 的情况下，我们自然而然就想到了，同时去 修改(mangle) 对应的 xxml,xxss,jsx这类的生成的文件。将他们进行 对照配合 修改，那么就能兼容小程序平台了，毕竟所见不为所得，用户在编写的时候，还是按照 web 的习惯去写 tailwindcss，我们编写的 webpack/vite/postcss plugin 这类的，把这些都处理掉就完事了。

比较好改一点的还是 uni-app，毕竟生成的 wxml 和 wxss 文件还比较可控。那种类 react 框架，wxml 都引入一个 base.wxml 然后根据那种 render function 来渲染的，就比较难了。目前个人的解法，也仅仅只能做到解析 AST，然后遇到某些关键词，比如 class/className/staticClass后，进行语句匹配，替换其中的字符串字面量，语句结束停止匹配并继续向下 walk ast。

当然在编写过程中，也发现这种和各个框架是耦合的，因为自己并没有去详细了解各个框架的生命周期和源码。导致目前都是针对打包后的结果进行解析修改。这点做的不是特别好，应该各个框架内，都有一个切面，可以把处理方法注入进去的。

省的在生成产物后，还要去解析 AST 进行修改，这样也十分的损耗性能。

以上就是我对这些天的感悟了。功能吧能用，达不到完美，毕竟还有 多线程，缓存 这种玩意要玩耍呢(笑)。

Bugs & Issues

如果在使用过程中遇到 Bugs 或者提出问题，欢迎提交到此处，笔者会尽快复现并修改