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

在小程序中愉快的使用 Tailwind CSS 吧!

tailwindcss
小程序
jit
共1317个字,阅读时间 7 分钟
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://icebreaker.top/articles/2022/5/16-use-tailwindcss-in-weapp

Image

在小程序中愉快的使用 Tailwind CSS 吧!

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

笔者之前写了一个 tailwindcss-miniprogram-preset,可是那个方案不能兼容最广泛的 Just in time 引擎,在写法上也有些变体。

于是笔者又写了一个 weapp-tailwindcss-webpack-plugin,这是一个 plugin 合集,包含 webpack/vite plugin,它会同时处理类 wxmlwxss 文件,从而我们开发者,不需要更改任何代码,就能让 jit 引擎兼容微信小程序。

此方案可兼容 tailwindcss v2/v3webpack v4/v5postcss v7/v8

随着 @vue/cli-service v5 版本的发布,uni-app 到时候也会转为 webpack5 + postcss8 的组合,到时候,我会升级一下 uni-app 的示例,让它从 tailwindcss v2 jit 升级到 tailwindcss v3 jit

Usage

uni-app (vue2/3)

使用方式 | Demo 项目

uni-app for vite (vue3)

使用方式 | Demo 项目

Taro v3 (React/vue2/3)

使用方式 | React Demo 项目 | vue2 Demo 项目 | vue3 Demo 项目

remax (react)

使用方式 | Demo 项目

rax (react)

使用方式 | Demo 项目

原生小程序 (webpack5 mina)

使用方式 | Demo 项目

Options 配置项

配置项类型描述
htmlMatcher(assetPath:string)=>boolean匹配 wxml等等模板进行处理的方法
cssMatcher(assetPath:string)=>boolean匹配 wxss等等样式文件的方法
jsMatcher(assetPath:string)=>boolean匹配 js文件进行处理的方法,用于 react
mainCssChunkMatcher(assetPath:string)=>boolean匹配 tailwindcss jit 生成的 css chunk 的方法
framework (Taro 特有)reactvue2
customRuleCallback(node: Postcss.Rule, options: Readonly<RequiredStyleHandlerOptions>) => void可根据 Postcss walk 自由定制处理方案的 callback 方法
cssPreflightRecord<string,string>false
// default 默认:
cssPreflight: {
  'box-sizing': 'border-box',
  'border-width': '0',
  'border-style': 'solid',
  'border-color': 'currentColor'
}
// result
// box-sizing: border-box;
// border-width: 0;
// border-style: solid;
// border-color: currentColor

// case 禁用所有
cssPreflight: false
// result
// none

// case 禁用单个属性
cssPreflight: {
  'box-sizing': false
}
// border-width: 0;
// border-style: solid;
// border-color: currentColor

// case 更改和添加单个属性
cssPreflight: {
  'box-sizing': 'content-box',
  'background': 'black'
}
// result
// box-sizing: content-box;
// border-width: 0;
// border-style: solid;
// border-color: currentColor;
// background: black

使用 arbitrary values

详见 tailwindcss/using-arbitrary-values 章节 | Sample

Q&A

1. 我在 js 里写了 tailwindcss 的任意值,为什么没有生效?

详见 issue#28

A: 因为这个插件,主要是针对,wxss,wxmljsx 进行转义的,js 里编写的 string 是不转义的。如果你有这样的需求可以这么写:

import { replaceJs } from 'weapp-tailwindcss-webpack-plugin/replace'
const cardsColor = reactive([
  replaceJs('bg-[#4268EA] shadow-indigo-100'),
  replaceJs('bg-[#123456] shadow-blue-100')
])

你不用担心把代码都打进来导致体积过大,我在 'weapp-tailwindcss-webpack-plugin/replace' 中,只暴露了 2 个方法,代码体积 1k 左右,esm 格式。

2. 一些像 disabled:opacity-50 这类的 tailwindcss 前缀不生效?

详见 issue#33,小程序选择器的限制。

3. 和原生组件一起使用注意事项

假如出现原生组件引入报错的情况,可以参考 issue#35 ,忽略指定目录下的文件,跳过插件处理,比如 uni-app 中的 wxcomponents

如何更改?在传入的配置项 cssMatcherhtmlMatcher 这类中过滤指定目录或文件。

4. 编译到 h5 注意事项

有些用户通过 uni-app 等跨端框架,不止开发成各种小程序,也开发为 H5,然而 tailwindcss 本身就兼容 H5 了。此时你需要更改配置,我们以 uni-app 为例:

const isH5 = process.env.UNI_PLATFORM === 'h5';
// 然后在 h5 环境下把 webpack plugin 和 postcss for weapp 给禁用掉
// 我们以 uni-app-vue3-vite 这个 demo为例
// vite.config.ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import { ViteWeappTailwindcssPlugin as vwt } from 'weapp-tailwindcss-webpack-plugin';
// vite 插件配置
const vitePlugins = [uni()];
!isH5 && vitePlugins.push(vwt());

export default defineConfig({
  plugins: vitePlugins
});

// postcss 配置
// 假如不起作用,请使用内联postcss
const isH5 = process.env.UNI_PLATFORM === 'h5';

const plugins = [require('autoprefixer')(), require('tailwindcss')()];

if (!isH5) {
  plugins.push(
    require('postcss-rem-to-responsive-pixel')({
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx'
    })
  );

  plugins.push(require('weapp-tailwindcss-webpack-plugin/postcss')());
}

module.exports = {
  plugins
};

模板 template

uni-app-vite-vue3-tailwind-vscode-template

uni-app-vue3-tailwind-vscode-template

uni-app-vue2-tailwind-vscode-template

weapp-native-mina-tailwindcss-template

预设 tailwindcss preset

tailwindcss-miniprogram-preset

Bugs & Issues

目前这个插件正在快速的开发中,如果遇到 Bug 或者想提出 Issue

欢迎提交到此处