Mpx

安装

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

Bun

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

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

package.json

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

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

如需在补丁前强制刷新 tailwindcss-patch 的缓存，可改为：

package.json

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

默认不清理缓存；只有当你怀疑缓存导致补丁未生效或目标不一致时，才需要添加 --clear-cache。***

配置

更改 mpx.config.js 注册 weapp-tailwindcss

mpx.config.js

const { defineConfig } = require('@vue/cli-service')
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
const path = require('node:path')
module.exports = defineConfig({
  outputDir: `dist/${process.env.MPX_CURRENT_TARGET_MODE}`,
  pluginOptions: {
    mpx: {
      plugin: {
        srcMode: 'wx',
        hackResolveBuildDependencies: ({ files, resolveDependencies }) => {
          const path = require('path')
          const packageJSONPath = path.resolve('package.json')
          if (files.has(packageJSONPath)) files.delete(packageJSONPath)
          if (resolveDependencies.files.has(packageJSONPath)) {
            resolveDependencies.files.delete(packageJSONPath)
          }
        }
      },
      loader: {}
    }
  },
  configureWebpack(config) {
    // 添加的代码在这里
    config.plugins.push(
      new UnifiedWebpackPluginV5({
        rem2rpx: true,
        cssEntries: [
          // 你 @import "weapp-tailwindcss"; 那个文件绝对路径
          path.resolve(__dirname, './src/app.css'),
        ],
      })
    )
  }
})

tailwindcss@4 必须配置 cssEntries 并且使用绝对路径，否则 tailwindcss 生成的类名不会参与转译。

添加 postcss.config.js 注册 @tailwindcss/postcss

postcss.config.js

module.exports = {
  plugins: [
    require('@tailwindcss/postcss')()
  ]
}

添加样式

在 src/app.css 中引入 weapp-tailwindcss：

src/app.css

@import "weapp-tailwindcss";

💡 如果你希望在任意样式文件中直接引用包内样式，请使用 @import "weapp-tailwindcss/index.css";。这样可以确保 postcss-import 解析到的是真实的 CSS 资源，避免出现 “Unknown word "use strict"” 这一类由于误解析到 JS 文件导致的构建报错。

Tailwind CSS 样式引用指引

• Tailwind CSS v3.x：沿用旧模块名即可（例如 @import 'tailwindcss/base.css'、@import 'tailwindcss/components.css'、@import 'tailwindcss/utilities.css'）。
• Tailwind CSS v4.x：推荐直接引入 weapp-tailwindcss 提供的聚合样式：

src/app.mpx

<style lang="scss">
  @import 'weapp-tailwindcss/index.css';
</style>

这样可以一次性获得 base / components / utilities，并规避 postcss-import 误解析 JS 入口的报错。如果你是从 v3 升级，只需将原来的三个 @import 换成这条语句即可。

然后在项目目录下，小程序全局的 app.mpx 中，通过 @import 引入该文件：

app.mpx

<style lang="css">
@import "./app.css";
</style>

更改好配置之后，直接启动即可

参考模版

https://github.com/icebreaker-template/mpx-tailwindcss-v4