Use Tailwind CSS happily in small programs!

Use Tailwind CSS happily in small programs!

Bring tailwindcss JIT idea into small program development!

I wrote one before tailwindcss-miniprogram-preset However, that scheme is not compatible with the most extensive Just in time engine, and there are some variations in the writing method.

So the author wrote a webapp tailwindcss webpack plugin, which is a collection of plugins, including webpack/vite plugin. It will process wxml and wxss files at the same time, so that our developers can make the jit engine compatible with wechat applet without changing any code.

This scheme is compatible with tailwindcss v2/v3, webpack v4/v5 and postcss v7/v8.

along with @vue/cli-service When the v5 version is released, the uni app will also be converted to the combination of webpack5 + postcss8. At that time, I will upgrade the example of uni app from tailwindcss v2 jit to tailwindcss v3 jit


uni-app (vue2/3)

Mode of use | Demo project

uni-app for vite (vue3)

Mode of use | Demo project

Taro v3 (React/vue2/3)

Mode of use | React Demo project | vue2 Demo project | vue3 Demo project

remax (react)

Mode of use | Demo project

rax (react)

Mode of use | Demo project

Native applet (webpack5 mina)

Mode of use | Demo project

Options configuration item

Configuration itemtypedescribe
htmlMatcher(assetPath:string)=>booleanMethods of matching wxml and other templates for processing
cssMatcher(assetPath:string)=>booleanMethods of matching wxss and other style files
jsMatcher(assetPath:string)=>booleanThe method of matching js files for processing is used for react
mainCssChunkMatcher(assetPath:string)=>booleanMethod of matching css chunk generated by tailwindcss jit
framework (Taro specific)react\vue2\vue3Since the compilation results of different Taro frameworks are different, it is necessary to explicitly declare the default react of the framework type
customRuleCallback(node: Postcss.Rule, options: Readonly<RequiredStyleHandlerOptions>) => voidThe callback method of processing scheme can be customized freely according to Postcss walk
cssPreflightRecord<string,string>\falseFor css presets added in all view nodes, you can disable the original rules or add new rules according to the situation. The detailed usage is as follows:
// Default 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 disable all
cssPreflight: false
// result
// none

// case disable single attribute
cssPreflight: {
  'box-sizing': false
// border-width: 0;
// border-style: solid;
// border-color: currentColor

// case changing and adding individual attributes
cssPreflight: {
  'box-sizing': 'content-box',
  'background': 'black'
// result
// box-sizing: content-box;
// border-width: 0;
// border-style: solid;
// border-color: currentColor;
// background: black

Using arbitrary values

See details Tailwindcss / using arbitrary values | Sample


1. I wrote any value of tailwindcss in js. Why didn't it take effect?

See details issue#28

A: Because this plug-in is mainly used to escape wxss,wxml and jsx. The string s written in js are not escaped. If you have such needs, you can write:

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

You don't have to worry about the excessive volume caused by typing in all the code. In 'web tailwindcss webpack plugin / replace', I only exposed two methods. The code volume is about 1k and the esm format.

2. Do some tailwindcss prefixes like disabled:opacity-50 not take effect?

See details issue#33 , restrictions on applet selectors.

3. Precautions for use with native components

If an error is reported when a native component is introduced, you can refer to issue#35 , ignore the files in the specified directory and skip plug-in processing, such as wxcomponents in uni app.

How to change? Filter the specified directory or file in the incoming configuration items cssMatcher and htmlMatcher.

4. Compilation to h5 considerations

Some users not only develop various small programs but also H5 through cross end frameworks such as uni app. However, tailwindcss itself is compatible with H5. At this point, you need to change the configuration. Let's take uni app as an example:

const isH5 = process.env.UNI_PLATFORM === 'h5';
// Then disable the webpack plugin and postcss for web app in the h5 environment
// Let's take the demo of uni app vue3 vite as an example
// vite.config.ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import { ViteWeappTailwindcssPlugin as vwt } from 'weapp-tailwindcss-webpack-plugin';
// vite plug-in configuration
const vitePlugins = [uni()];
!isH5 && vitePlugins.push(vwt());

export default defineConfig({
  plugins: vitePlugins

// postcss configuration
// If it doesn't work, use inline postcss
const isH5 = process.env.UNI_PLATFORM === 'h5';

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

if (!isH5) {
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx'


module.exports = {

Related projects

Template template





Preset tailwindcss preset


Bugs & Issues

At present, the plug-in is under rapid development. If you encounter a Bug or want to put forward an Issue

Welcome to submit here

Tags: Javascript

Posted by kingman65 on Mon, 16 May 2022 08:36:43 +0300