Taro webpack

提示

主线接入文档已合并到 Taro。本页保留给旧链接和 Tailwind CSS 4 专项排障。

安装

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

配置

在你的 app.css 里面添加

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

关于 @import 'tailwindcss'

生成模式下，推荐在 Tailwind CSS 4.x 入口里直接写 @import 'tailwindcss'。WeappTailwindcss 会根据 target: 'weapp' 生成小程序目标 CSS。

这也能继续复用官方文档和 IntelliSense 识别的写法 @import 'tailwindcss'，以获得更好的 IDE 智能提示 支持。

存量项目中已经存在的 @import 'weapp-tailwindcss/index.css' 仍然可以继续使用，适合暂时不调整 CSS 入口的 v4 项目。

不论使用哪种入口，都请确保 cssEntries 指向纯 .css 文件，并且不要额外注册 @tailwindcss/postcss 或 @tailwindcss/vite。

这段默认你的 Tailwind 入口是 src/app.css，所以 ../src 指向整个源码目录。Taro 模板里的页面、组件和后续新增目录都在 src 下面，不需要单独写 pages、components。

注册插件

在项目的配置文件 config/index 中注册:

config/index.[jt]s

import { WeappTailwindcss } from 'weapp-tailwindcss/webpack'
// 假如你使用 js 配置，则使用下方 require 的写法
// const { WeappTailwindcss } = require('weapp-tailwindcss/webpack')

{
  // 找到 mini 这个配置
  mini: {
    // postcss: { /*...*/ },
    // 中的 webpackChain, 通常紧挨着 postcss 
    webpackChain(chain, webpack) {
      // 复制这块区域到你的配置代码中 region start
      chain.merge({
        plugin: {
          install: {
            plugin: WeappTailwindcss,
            args: [{
              // 这里可以传参数
              rem2rpx: true,
              tailwindcssBasedir: process.cwd(),
            }],
          },
        },
      })
      // region end
    }
  }
}

常规 Taro Webpack 项目只要在 src/app.ts 或 src/app.js 里引入了 ./app.css，可以不写 cssEntries。 weapp-tailwindcss@5 默认接管 Tailwind CSS 样式生成，不需要再创建 postcss.config.mjs 注册 @tailwindcss/postcss。如果项目已有 PostCSS 配置，只保留非 Tailwind 的业务插件即可。

多入口、入口不在 src/app.css、自动识别失败时，再补这一项：

import path from 'node:path'

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

运行

然后执行命令发布到微信小程序

npm

npm run dev:weapp

Yarn

yarn dev:weapp

pnpm

pnpm run dev:weapp

Bun

bun run dev:weapp

微信开发者工具导入这个项目，即可看到效果

参考模板

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