此页面需要javascript支持,请在浏览器中启用javascript

tailwindcss 定制化之旅

前端开发
tailwindcss
共1073个字,阅读时间 5 分钟
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://icebreaker.top/articles/2021/8/30-tailwind-custom-journey

头图

tailwindcss 小程序定制化之旅

前言

tailwindcss 太好用,怎么在小程序里用?

小程序编写的 标签class,还有 css选择器 的支持程度都和 H5 不一样,

所以我们要针对小程序目前的实现,去定制化 tailwindcss

以便来兼容 uni-app, taro原生开发

定制化 tailwindcss

小程序到底有哪些限制呢?我们要从哪几个方向对 tailwindcss 进行定制呢?

1. 不能用特殊字符的 class

view textclass 写特殊字符,在渲染的时候会默认变成空格。

这里给大家直接举例子来直观的表现这个限制:

  • class="w-1/4 h-1.5" => class="w-1 4 h-1 5"
  • class="hover:text-xs" => class="hover text-xs"
  • class="w-[996rpx] => class="w- 996rpx"

聪明的小伙伴们,一看这 3 个例子立马就知道,无法直接使用的场景:

  • 部分带有 \/ \. 字符的工具类
  • tailwindcss 中的 variants
  • tailwindcssjit 模式

当然小伙伴们看到不能直接使用这 6 个字,肯定知道我的意思是可以间接使用的。

比如对 class 进行重命名。

formtosample
\/-div-w-1/4 -> w-1-div-4
\.-dot-w-1.5 -> w-1-dot-5

至于 variants , 由于 wxss 没有这么多选择器,我们暂时置空。

jit 模式目前处于试验阶段,等能方便的自定义解析器之时再用。

2. 无所事事的选择器

先上 wxss 官方文档链接

从里面,我们可以看到目前支持的选择器有: 目前支持的选择器

显然,它比 h5 要少太多啦!

不过我们可以根据这张表进行进一步阉割。

  • 去除基于 :not 选择器的 corePlugins , 例如 space ,divide*
  • 去除不支持 * 选择器的 corePlugins , 例如默认添加 '*, ::before, ::after' 的插件 boxShadow , ring*
  • 清空 tailwind variants ( 这类hover: focus: ,... , 统统干掉)

3. H5 需要的,小程序不需要

我们知道 tailwindcss 主要由三块组成:

  • baseh5默认标签 进行 normalize
  • components 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 一般是 rootValue16px, 那根据这个算法就是 32rpx

这一块非常简单,写个插件或者几行代码转化一下就可以。

vscode 实现效果图: vscode 实现效果图

具体实现可以看我附录的代码。

tailwindcss-miniprogram-preset

根据上文的经验写了一个预设 tailwindcss-miniprogram-preset

怎么使用呢?我们只需要在安装初始化 tailwindcsspostcss 后,来安装一下。

yarn add -D tailwindcss-miniprogram-preset

然后在 tailwind.config.js 里,添加它

// tailwind.config.js
module.exports = {
  presets: [require('tailwindcss-miniprogram-preset')]
  // ...
}

然后在 app.wxss

@tailwind utilities;

就可以使用了。

在开发的时候,生成的 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 功能,让我们在原生的小程序开发中,自定义 postcsssass 工具链编译,来享受它们和 tailwindcss 带来的各种好处。