在小程序中欢快的应用 Tailwind CSS 吧!

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

  • 在小程序中欢快的应用 Tailwind CSS 吧!

    • Usage

      • uni-app (vue2/3)
      • uni-app for vite (vue3)
      • Taro v3 (React/vue2/3)
      • remax (react)
      • rax (react)
      • 原生小程序(webpack5 mina)
    • Options 配置项
    • 应用 arbitrary values

    • Q&A

      • 1. 我在 js 里写了 tailwindcss 的任意值，为什么没有失效?
      • 2. 一些像 disabled:opacity-50 这类的 tailwindcss 前缀不失效?
      • 3. 和原生组件一起应用注意事项
      • 4. 编译到 h5 注意事项

    • Related projects

      • 模板 template
      • 预设 tailwindcss preset
    • Bugs & Issues

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

于是笔者又写了一个 weapp-tailwindcss-webpack-plugin，这是一个 plugin 合集，蕴含 webpack/vite plugin，它会同时解决类 wxml 和 wxss 文件，从而咱们开发者，不须要更改任何代码，就能让 jit 引擎兼容微信小程序。

此计划可兼容 tailwindcss v2/v3，webpack v4/v5，postcss 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 特有)react\vue2\vue3因为 Taro 不同框架的编译后果有所不同，须要显式申明框架类型 默认react
customRuleCallback(node: Postcss.Rule, options: Readonly<RequiredStyleHandlerOptions>) => void可依据 Postcss walk 自在定制解决计划的 callback 办法
cssPreflightRecord<string,string>\false在所有 view节点增加的 css 预设，可依据状况自在的禁用原先的规定，或者增加新的规定。 具体用法如下:
// 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,wxml 和 jsx 进行本义的，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。

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

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.tsimport { 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 配置// 如果不起作用，请应用内联postcssconst 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};

Related projects

模板 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

欢送提交到此处