Use Tailwind CSS happily in small programs!

Bring tailwindcss JIT idea into small program development!

Use Tailwind CSS happily in small programs!

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

Usage

Options configuration item

Configuration item	type	describe
htmlMatcher	(assetPath:string)=>boolean	Methods of matching wxml and other templates for processing
cssMatcher	(assetPath:string)=>boolean	Methods of matching wxss and other style files
jsMatcher	(assetPath:string)=>boolean	The method of matching js files for processing is used for react
mainCssChunkMatcher	(assetPath:string)=>boolean	Method of matching css chunk generated by tailwindcss jit
framework (Taro specific)	react\	vue2\	vue3	Since 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>) => void	The callback method of processing scheme can be customized freely according to Postcss walk
cssPreflight	Record<string,string>\	false	For 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

Q&A

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) {
  plugins.push(
    require('postcss-rem-to-responsive-pixel')({
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx'
    })
  );

  plugins.push(require('weapp-tailwindcss-webpack-plugin/postcss')());
}

module.exports = {
  plugins
};