Native development (packaging solution)

warning

This is a packaging solution for native development. If you need a purely native solution, please check out Quick Start (Pure Native).

Since the native applet is not exposed by the webpack/vite/gulp tool chain, we need to add this set of mechanisms to integrate the entire front-end community to achieve more powerful functions.

tip

The idea of adding compile-time tools such as webpack/vite/gulp to native small programs is the same. However, the implementation is more complicated and consumes energy. The principle will not be mentioned here.

Before changing the template toolchain process, please make sure you are familiar with toolchain development (it's almost as good as mine).

In addition, these templates only need to slightly change the product suffix and adjust the @source scanning range to adapt to Baidu, Toutiao, JD... various platforms.

gulp template

Template project weapp-tailwindcss-gulp-template(gulp packaging)

weapp-vite template

If you want native mini programs to be built using Vite, it is recommended to check out [Pure native weapp-vite access] (/docs/quick-start/native/install). The current documentation is for tailwindcss@4. The current documentation only maintains Tailwind CSS 4 access instructions.

Then register vite.config.ts in weapp-tailwindcss/vite:

vite.config.ts

import { dirname, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import { defineConfig } from 'weapp-vite/config'
import { WeappTailwindcss } from 'weapp-tailwindcss/vite'

const projectRoot = dirname(fileURLToPath(import.meta.url))

export default defineConfig({
  plugins: [
    WeappTailwindcss({
      cssEntries: [
        resolve(projectRoot, 'app.css'),
      ],
      cssOptions: {
        rem2rpx: true,
      },
    }),
  ],
})

The generation mode will take over Tailwind CSS generation and applet translation. There is no need to register the tailwindcss PostCSS plug-in or execute weapp-tw patch. Tailwind CSS 4 projects should explicitly configure cssEntries so that WeappTailwindcss can stably read the @source and Tailwind instructions in the entry CSS. cssEntries is only responsible for portal identification, and the portal CSS still has to be actually introduced through the project portal.

Entry CSS of Tailwind CSS 4:

app.css

@import "tailwindcss";
@source "./src/**/*.{wxml,js,ts,vue}";
@source "./app.{js,ts,json}";
@source not "./dist";

The entry for Tailwind 4 is only placed in pure .css files. For the complete writing method, see [Pure native weapp-vite access] (/docs/quick-start/native/install).

Isolation of component styles

tip

I found that many users, when using native development, often ask why the styles do not take effect.

There may be several reasons for this:

1. The code file is not within the scanning range of @source
2. Native applet components have Component Style Isolation turned on by default. By default, the style of custom components is only affected by the custom component wxss. The tool classes generated by tailwindcss are all in the global style file app.wxss. If it does not belong to the component, it will naturally not take effect.

At this time you can use:

/* Component custom-component.js */
Component({
  options: {
    addGlobalClass: true,
  }
})

To allow the component to apply the styles in app.wxss.

WeChat applet related development documents

vscode tailwindcss smart prompt settings

We know that the best practice of tailwindcss is to be used in conjunction with the vscode/webstorm prompt plug-in.

If there is no smart prompt when writing vscode in the wxml file of class, you can follow the steps below.

Here we take vscode as an example:

1. Install WXML - Language Services plug-in (just search for wxml which has the most downloads)

2. Install Tailwind CSS IntelliSense plug-in

Then find Tailwind CSS IntelliSense of Extended settings

In include languages, mark wxml as html.

The smart prompt comes out: