Let small program development enter the tailwind jit era!

Bring tailwindcss JIT idea into small program development!

The author wrote a few months ago tailwindcss-miniprogram-preset Preset, but this preset scheme has very little operability and is not compatible with the Just in time engine of tailwindcss v2/v3. At the same time, there are some variations in the writing method.

So the author designed another scheme and finally realized it weapp-tailwindcss-webpack-plugin . Compared with the original preset or postcss scheme, this scheme has many advantages:

• Designed for jit, compatible with two versions of V2 / V3 jit engine
• Developers do not need to memorize any additional writing variants, bringing the original tailwindcss development experience
• Compatible with the multi terminal development framework of applet based on webpack v4/v5, it is simple and easy to use

Next, let's show a demo based on uni app to quickly experience this scheme.

Best practices

Pre preparation: vscode, vscode-tailwindcss , nodejs lts, wechat developer tool

1. Create a project from the Vue cli command line

See Quick start of uni app

2. Install npm package

At present, the built-in webpack version of uni app is 4 and the postcss version is 7

We need to install the postcss7 compat version of tailwindcss:

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 It is a postcss plug-in written by the author. It supports REM - > rpx, postcss7 and postcss8, See here for configuration

3. Initialize tailwind config. JS and postcss config. js

You only need to add some configurations to the initialization file:

// tailwind.config.js basic configuration without any 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 reference example
// 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'
    }),
    // #Start with the added part of region
    // tailwindcss for postcss7
    require('tailwindcss')({ config: './tailwind.config.js' }),
    // rem to rpx
    require('postcss-rem-to-responsive-pixel/postcss7')({
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx'
    }),
    // #End of endregion addition
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
  ]
}

4. Set environment variables

add to. env setting TAILWIND_MODE

# https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin/blob/main/demo/uni-app/.env
# jit mode HMR
TAILWIND_MODE=watch

This is to be compatible with the HMR scheme of tailwindcss v2. If you use tailwindcss v3, you don't need it.

5. In Src / APP Reference in Vue:

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

<style lang="scss">
/*Public css for each page */
// scss needs to install yarn add - D sass sass loader @ ^ 10
// The applet needs' base 'to inject variables, but does not need html preflight
// @tailwind base;
// @tailwind utilities;
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';
</style>

6. Add Vue. In the root directory 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

Now you can use most of the features of jit in uni app!

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 of jit You can't write that -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>

Learn more

The above is just a simple hello world. If you want to know more, you can go to Github Welcome to star/fork.

Bugs & Issues

If you encounter Bugs or ask questions during use, Welcome to submit it here. The author will reproduce and modify it as soon as possible