Mpx

提示

主线接入文档已合并到 Mpx。本页保留给旧链接和 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

配置

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

mpx.config.js

const { defineConfig } = require('@vue/cli-service')
const { WeappTailwindcss } = require('weapp-tailwindcss/webpack')
const path = require('node:path')
module.exports = defineConfig({
  outputDir: `dist/${process.env.MPX_CURRENT_TARGET_MODE}`,
  pluginOptions: {
    mpx: {
      plugin: {
        postcssInlineConfig: {
          ignoreConfigFile: true,
          plugins: []
        },
        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 WeappTailwindcss({
        appType: 'mpx',
        rem2rpx: true,
        cssEntries: [
          // Tailwind CSS 入口文件绝对路径
          path.resolve(__dirname, './src/app.css'),
        ],
      })
    )
  }
})

tailwindcss@4 必须配置 cssEntries 并且使用绝对路径，否则 tailwindcss 生成的类名不会参与转译。 Mpx 的 CSS 生成也由 WeappTailwindcss 接管，不要再注册 Tailwind PostCSS 生成插件。 这里的注册目标也必须是纯 css 入口文件，不要把 tailwindcss@4 放进 scss / less / sass 入口里，否则样式生成和 weapp-tailwindcss 转译都可能失效。

添加样式

在 src/app.css 中引入 Tailwind CSS：

src/app.css

@import "tailwindcss";
@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 CSS 4.x 使用 CSS-first 入口。@source "../src"; 用于告诉 Tailwind 扫描 Mpx 源码目录。

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

app.mpx

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

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

参考模版

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