前言tailwindcss 太好用，怎么在小程序里用？小程序编写的 标签，class，还有 css选择器 的支持程度都和 H5 不一样,所以我们要针对小程序目前的实现，去定制化 tailwindcss以便来兼容 uni-app, taro 和 原生开发定制化 tailwindcss小程序到底有哪些限制呢？我们要从哪几个方向对 tailwindcss 进行定制呢？1. 不能用特殊字符的 class在 view text 的 class 写特殊字符，在渲染的时候会默认变成空格。这里给大家直接举例子来直观的表现这个限制: => => w- 996rpx”聪明的小伙伴们，一看这 3 个例子立马就知道,无法直接使用的场景:部分带有 \/\. 字符的工具类tailwindcss 中的 variantstailwindcss 的 jit 模式当然小伙伴们看到不能直接使用这6个字,肯定知道我的意思是可以间接使用的。比如对 class 进行重命名。至于 variants , 由于 wxss 没有这么多选择器，我们暂时置空。jit 模式目前处于试验阶段，等能方便的自定义解析器之时再用。2. 无所事事的选择器先上 wxss 官方文档链接从里面，我们可以看到目前支持的选择器有：目前支持的选择器显然，它比 h5 要少太多啦！不过我们可以根据这张表进行进一步阉割。去除基于 :not 选择器的 corePlugins ,例如 space ,pide*去除不支持 * 选择器的 corePlugins , 例如默认添加 ‘*, ::before, ::after’ 的插件 boxShadow , ring*清空 tailwind variants ( 这类hover:focus: ,… ,统统干掉)3. H5 需要的，小程序不需要我们知道 tailwindcss 主要由三块组成:base 对 h5默认标签 进行 normalizecomponents container media 容器布局utilities 工具类显然在小程序这个场景下 base,components都是不需要的。小程序标签和 h5 完全不同，没有 base 的必要另外小程序自适应，主要靠 rpx，而不是靠 pc，小屏，中屏，大屏,所以 components 也不需要。所以我们只需要在小程序中导入 utilities另外由于 normalize 标签 和 自适应方案的不同我们可以把 theme.screens 设为 false,不去生成 sm:xxx 这类的代码。同时自然也不需要 preflight,container,accessibility这一类的插件了。4. 把默认的 rem 转成 rpx小程序专属自适应单位 rpx
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。
我们 rem 一般是 rootValue 为 16px, 那根据这个算法就是 32rpx。这一块非常简单，写个插件或者几行代码转化一下就可以。vscode 实现效果图:vscode 实现效果图具体实现可以看我附录的代码。tailwindcss-miniprogram-preset根据上文的经验写了一个预设 tailwindcss-miniprogram-preset怎么使用呢？我们只需要在安装初始化 tailwindcss 和 postcss 后, 来安装一下。yarn add -D tailwindcss-miniprogram-preset然后在 tailwind.config.js 里，添加它
//tailwind.config.jsmodule.exports={presets:[require('tailwindcss-miniprogram-preset')]//...}
然后在 app.wxss 里
@tailwindutilities;
就可以使用了。在开发的时候，生成的 wxss 大概有 100+kb,不过在 purgecss后，就会非常小了。purge 默认 process.env.NODE_ENV === ‘production’ 开启，也可手动开启。再配合上 vscode 插件 Tailwind CSS IntelliSense 使用,可以直接自动生成智能提示，开发体验很好。另外也写了一份 uni-app + vue3 + tailwindcss 的模板，有需要可以使用 uni-app-vue3-tailwind-vscode-template也写了一个在原生小程序中，使用 scss + postcss + tailwindcss 的例子。接下来下一篇文章，我们就简单谈谈，如何抛弃微信开发者工具的 postcss 功能 , 让我们在原生的小程序开发中，自定义 postcss 和 sass 工具链编译，来享受它们和 tailwindcss 带来的各种好处。
