Taro webpack

tip

Mainline access documentation has been merged into Taro. This page is reserved for legacy links and Tailwind CSS 4-specific troubleshooting.

Install

npm

npm install -D tailwindcss weapp-tailwindcss

Yarn

yarn add --dev tailwindcss weapp-tailwindcss

pnpm

pnpm add -D tailwindcss weapp-tailwindcss

Bun

bun add --dev tailwindcss weapp-tailwindcss

Configuration

Add in your app.css

@import "tailwindcss" source(none);
@source "../src";

About @import 'tailwindcss'

In generator mode, we recommend writing @import 'tailwindcss'.WeappTailwindcss will generate mini app target CSS based on target: 'weapp'.

This also keeps the official docs and IntelliSense-friendly form of @import 'tailwindcss' so you can get better IDE IntelliSense support.

Existing projects can still keep using @import 'weapp-tailwindcss/index.css' when you do not want to change the CSS entry yet in a v4 project.

No matter which entry you use, make sure cssEntries points to a pure .css file, and do not register extra @tailwindcss/postcss or @tailwindcss/vite.

By default, your Tailwind entry is src/app.css, so ../src points to the entire source code directory. The pages, components and subsequently added directories in the Taro template are all under src. There is no need to write pages and components separately.

Register plugin

Register in the project's configuration file config/index:

config/index.[jt]s

import path from 'node:path'
import { WeappTailwindcss } from 'weapp-tailwindcss/webpack'
// If you use js configuration, use the require writing method below
// const { WeappTailwindcss } = require('weapp-tailwindcss/webpack')

{
// Find the configuration of mini
  mini: {
    // postcss: { /*...*/ },
// webpackChain, usually next to postcss
    webpackChain(chain, webpack) {
// Copy this region into your configuration code region start
      const projectRoot = path.resolve(__dirname, '..')
      chain.merge({
        plugin: {
          install: {
            plugin: WeappTailwindcss,
            args: [{
// Parameters can be passed here
              cssOptions: {
                rem2rpx: true,
              },
              tailwindcssBasedir: projectRoot,
              cssEntries: [
                path.resolve(projectRoot, 'src/app.css'),
              ],
            }],
          },
        },
      })
      // region end
    }
  }
}

Tailwind CSS 4 projects should explicitly configure cssEntries while still including src/app.ts in src/app.js or ./app.css. weapp-tailwindcss@5 takes over Tailwind CSS style generation by default, and there is no need to create postcss.config.mjs to register @tailwindcss/postcss. If the project already has PostCSS configuration, only keep non-Tailwind business plug-ins.

When there are multiple entries, the entry is not in src/app.css or there is a subcontracted independent entry, write all pure .css Tailwind entries into cssEntries:

import path from 'node:path'

const projectRoot = path.resolve(__dirname, '..')

args: [{
  cssOptions: {
    rem2rpx: true,
  },
  tailwindcssBasedir: projectRoot,
  cssEntries: [
    path.resolve(projectRoot, 'src/app.css'),
  ],
}]

Run

Then execute the command and publish it to the WeChat applet

npm

npm run dev:weapp

Yarn

yarn dev:weapp

pnpm

pnpm run dev:weapp

Bun

bun run dev:weapp

Import this project into WeChat developer tools and you can see the effect

Reference template

https://github.com/icebreaker-template/taro-webpack-tailwindcss-v4