Mpx

externalClasses 提醒

mpx 自定义组件如果声明了 externalClasses，请在插件配置的 customAttributes 中列出这些属性。否则像 my-class="bg-[#fafa00] text-[40px]" 这样的写法会被微信开发者工具拆成无效片段，导致样式失效。

详细说明与更多示例请查阅 👉 《组件外部样式类（externalClasses）的支持》。

Mpx 使用 Webpack 链路，建议显式配置 cssEntries，让 weapp-tailwindcss 稳定定位 Tailwind CSS 入口。

注册插件

在 vue.config.js 中注册：

vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { WeappTailwindcss } = require('weapp-tailwindcss/webpack')
const path = require('node:path')

module.exports = defineConfig({
  // other options
  configureWebpack(config) {
    config.plugins.push(
      new WeappTailwindcss({
        rem2rpx: true,
        appType: 'mpx',
        cssEntries: [
          path.resolve(__dirname, 'src/app.css'),
        ],
      })
    )
  }
})

引入 Tailwind CSS 样式

Tailwind CSS 生成由 WeappTailwindcss 接管，不要再注册 Tailwind 官方 PostCSS 生成插件。

Tailwind CSS 3.x

src/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSS 4.x

src/app.css

@import "tailwindcss";
@source "../src";
@source not "../dist";
@source not "../node_modules";

Tailwind 4 入口请放在纯 .css 文件里，不要直接放进 scss、less、sass 入口。

在 app.mpx 中引入

src/app.mpx

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

mpx 中的 vscode tailwindcss 智能提示缺失设置

如果在 mpx 文件中写 class 没有智能提示，可以在 VS Code 的 Tailwind CSS IntelliSense 扩展设置里处理。

在 include languages 里，把 mpx 标记为 html。

保存设置后，再到 mpx 文件里写 class，就能看到智能提示。