`tailwindcss jit` 与各大框架的融合

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)

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

uni-app (vue2/3)

Demo 项目

uni-app for vite (vue3)

Demo 项目

taro (React/vue2/3)

React Demo 项目

vue2 Demo 项目

vue3 Demo 项目

remax (react)

Demo 项目

rax (react)

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 或者提出问题，欢迎提交到此处，笔者会尽快复现并修改