让小程序开发进入 `tailwind jit` 时代!

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

笔者几个月前写了一个 tailwindcss-miniprogram-preset 预设，可是这个预设计划，可操作性十分的小，也不能兼容 tailwindcss v2/v3 的 Just in time 引擎，同时在写法上也有肯定的变体。

于是笔者又设计了一个计划，并最终实现了 weapp-tailwindcss-webpack-plugin。相比原先 preset or postcss 计划，这个计划有很多的劣势:

为 jit设计，兼容 v2/v3 2个版本的 jit 引擎
开发者不须要额定记忆任何的写法变体，带来原汁原味的 tailwindcss 开发体验
兼容基于 webpack v4/v5 的小程序多端开发框架，简略易用

那么接下来就来展现一个基于 uni-app 的 demo 来疾速体验这个计划吧。

最佳实际

前置筹备: vscode,vscode-tailwindcss,nodejs lts,微信开发者工具

1.通过vue-cli命令行创立工程

此局部内容见 uni-app疾速上手

2.装置 npm 包

因为目前 uni-app 内置的 webpack 版本为 4 , postcss 版本为 7

咱们须要装置 tailwindcss 的 postcss7-compat 版本:

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，配置见此

3. 初始化 `tailwind.config.js` 和 `postcss.config.js`

只须要在初始化的文件内退出一些配置:

// 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}']  },  corePlugins: {    preflight: false  }}

// postcss.config.js 参考示例// https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/postcss.config.jsconst 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'    }),    // #region 增加的局部开始    // tailwindcss for postcss7    require('tailwindcss')({ config: './tailwind.config.js' }),    // rem 转 rpx    require('postcss-rem-to-responsive-pixel/postcss7')({      rootValue: 32,      propList: ['*'],      transformUnit: 'rpx'    }),    // #endregion 增加的局部完结    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 模式 HMRTAILWIND_MODE=watch

这是为了兼容 tailwindcss v2 的 HMR 计划，如果你是用的是 tailwindcss v3 就不须要了。

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.jsconst { 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

vue / wxml

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

理解更多

上述只是一个简略的 hello world，想要理解更多，能够到 Github，欢送 star/fork。

Bugs & Issues

如果在应用过程中遇到 Bugs 或者提出问题，欢送提交到此处，笔者会尽快复现并批改

让小程序开发进入 tailwind jit 时代!