weapp-tailwindcss-webpack-plugin

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

uni-app 使用方式
taro 使用方式(beta)
原生小程序

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

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

此方案可兼容 tailwindcss v2/v3，webpack v4/v5，postcss v7/v8。

Usage

uni-app

由于 uni-app 内置的 webpack 版本为 4 , postcss 版本为 7

1. 于是我们开始安装:

yarn add -D weapp-tailwindcss-webpack-plugin postcss-rem-to-responsive-pixel tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

postcss-rem-to-responsive-pixel 是一个由本人撰写的 postcss 插件，支持 rem -> rpx，同时支持 postcss7 和 postcss8，配置见此

Usage

// postcss 8:
require('postcss-rem-to-responsive-pixel')
// postcss 7:
require('postcss-rem-to-responsive-pixel/postcss7')

2. 然后添加 `tailwind.config.js`:

// 基础配置，无需任何preset
// https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/tailwind.config.js
/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  mode: 'jit',
  purge: {
    content: ['./src/**/*.{vue,js,ts,jsx,tsx,wxml}']
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [],
  corePlugins: {
    preflight: false
  }
}

3. 再添加 `postcss.config.js`

// 参考示例
// https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/postcss.config.js
const path = require('path')
module.exports = {
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import')({
      resolve(id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    }),
    require('autoprefixer')({
      remove: process.env.UNI_PLATFORM !== 'h5'
    }),
    // tailwindcss for postcss7
    require('tailwindcss')({ config: './tailwind.config.js' }),
    // rem 转 rpx
    require('postcss-rem-to-responsive-pixel/postcss7')({
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx'
    }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}

4. 添加 `.env` 设置 `TAILWIND_MODE`

# https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/.env
# 假如 jit 模式 HMR 失效
TAILWIND_MODE=watch

这是为了兼容 postcss7 的 HMR 方案，如果你是用的是 postcss8 就不需要了。

5. 在 `src/App.vue` 中添加:

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  //...
})
</script>

<style lang="scss">
/*每个页面公共css */
// scss 需要安装 yarn add -D sass sass-loader@^10
// 小程序需要 'base' 来注入变量，但不需要 html preflight
// @tailwind base;
// @tailwind utilities;
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';
</style>

6. 在根目录下添加 `vue.config.js`

// vue.config.js
const { UniAppWeappTailwindcssWebpackPluginV4 } = require('weapp-tailwindcss-webpack-plugin')

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
const config = {
  //....
  configureWebpack: {
    plugins: [new UniAppWeappTailwindcssWebpackPluginV4()]
  }
  //....
}

module.exports = config

现在，您就可以在 uni-app 中使用 jit 的大部分特性了！

jit example

<view :class="[flag?'bg-red-900':'bg-[#fafa00]']">bg-[#fafa00]</view>
<view :class="{'bg-[#098765]':flag===true}">bg-[#098765]</view>
<view class="p-[20px] -mt-2 mb-[-20px] ">p-[20px] -mt-2 mb-[-20px] margin的jit 不能这么写 -m-[20px]</view>
<view class="space-y-[1.6rem]">
  <view class="w-[300rpx] text-black text-opacity-[0.19]">w-[300rpx] text-black text-opacity-[0.19]</view>
  <view class="min-w-[300rpx] max-h-[100px] text-[20px] leading-[0.9]">min-w-[300rpx] max-h-[100px] text-[20px] leading-[0.9]</view>
  <view class="max-w-[300rpx] min-h-[100px] text-[#dddddd]">max-w-[300rpx] min-h-[100px] text-[#dddddd]</view>
  <view class="flex items-center justify-center h-[100px] w-[100px] rounded-[40px] bg-[#123456] bg-opacity-[0.54] text-[#ffffff]">Hello</view>
  <view class="border-[10px] border-[#098765] border-solid border-opacity-[0.44]">border-[10px] border-[#098765] border-solid border-opacity-[0.44]</view>
  <view class="grid grid-cols-3 divide-x-[10px] divide-[#010101] divide-solid">
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </view>
</view>

or @apply

<template><view class="hello">world</view></template>
<style lang="scss">
.hello {
  @apply flex items-center justify-center h-[100px] w-[100px] rounded-[40px] bg-[#123456] bg-opacity-[0.54] text-[#ffffff] #{!important};
}
</style>

当然以上只是示例，这样写 class 名称过长，一般我们都会使用 @apply 来提取这些样式做成公共类。

Taro v3 (React)

taro 3 内置 webpack 为 4 , postcss 为 8, 所以可以使用 tailwindcss 的 v3 版本

1. 于是我们开始安装:

yarn add -D weapp-tailwindcss-webpack-plugin postcss-rem-to-responsive-pixel tailwindcss postcss autoprefixer

2. 在 taro-app/config 中添加

const { TaroWeappTailwindcssWebpackPluginV4 } = require('weapp-tailwindcss-webpack-plugin')

const config = {
  // ...
  mini: {
    webpackChain(chain, webpack) {
      chain.merge({
        plugin: {
          install: {
            plugin: TaroWeappTailwindcssWebpackPluginV4,
            args: [
              {
                // ...
              }
            ]
          }
        }
      })
    }
  }
}

3. 执行 `npx tailwindcss init`

创建 postcss.config.js 和 tailwind.config.js

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: [],
  // v3 版本的 tailwindcss 有些不同
  corePlugins: {
    preflight: false
  }
}

4. 最后在 `app.scss` 引入后就可以便捷的使用了

v3 迁移指南

// base 是必要的
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';

原生小程序

有方案，原理在我脑子里，目前没空实现

TODO

关于其他小程序

处理了其他小程序的:

/.+\.(?:wx|ac|jx|tt|q|c)ss$/ 样式文件和 /.+\.(?:(?:(?:wx|ax|jx|ks|tt|q)ml)|swan)$/ 各种 xxml 和特殊的 swan

原理篇

另写一篇文章，大意还是 css ast, [xx]ml ast, js ast 那一套

TODO

Options

配置项	类型	描述
`htmlMatcher`	(string)=>boolean	匹配 `wxml`等等模板进行处理的方法
`cssMatcher`	(string)=>boolean	匹配 `wxss`等等样式文件的方法
`jsMatcher`	(string)=>boolean	匹配 `js`文件进行处理的方法，用于 `react`
`mainCssChunkMatcher`	(string)=>boolean	匹配 `tailwindcss jit` 生成的 `css chunk` 的方法

Bugs & Issues

由于 uni-app 和 taro 都在快速的开发中，如果遇到 Bugs 或者想提出 Issues

欢迎提交到此处，笔者会尽快复现并修改