Taro webpack

安装

npm

npm install -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

Yarn

yarn add --dev tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

pnpm

pnpm add -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss

然后把下列脚本，添加进你的 package.json 的 scripts 字段里:

package.json

 "scripts": {
   "postinstall": "weapp-tw patch"
 }

这是为了给 tailwindcss@4 打上支持 rpx 单位的补丁，否则它会把 rpx 认为是一种颜色

配置

在你的根目录创建 postcss.config.mjs

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

在你的 app.css 里面添加

@import "weapp-tailwindcss";

注册插件

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

config/index.[jt]s

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

{
  // 找到 mini 这个配置
  mini: {
    // postcss: { /*...*/ },
    // 中的 webpackChain, 通常紧挨着 postcss 
    webpackChain(chain, webpack) {
      // 复制这块区域到你的配置代码中 region start
      chain.merge({
        plugin: {
          install: {
            plugin: UnifiedWebpackPluginV5,
            args: [{
              appType: 'taro'
            }]
          }
        }
      })
      // region end
    }
  }
}

运行

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

npm

npm run dev:weapp

Yarn

yarn dev:weapp

pnpm

pnpm run dev:weapp

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

参考模板

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