mpx (原生增强)

externalClasses 提醒

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

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

在 vue.config.js 中注册：

vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')

module.exports = defineConfig({
  // other options
  configureWebpack(config) {
    config.plugins.push(
      new UnifiedWebpackPluginV5({
        rem2rpx: true,
      })
    )
  }
})

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

我们知道 tailwindcss 最佳实践，是要结合 vscode/webstorm提示插件一起使用的。

假如你遇到了，在 vscode 的 mpx 文件中，编写 class 没有出智能提示的情况，可以参考以下步骤。

这里我们以 vscode 为例:

接着找到 Tailwind CSS IntelliSense 的 扩展设置

在 include languages,手动标记 mpx 的类型为 html

保存设置，再去mpx文件里写class的时候，智能提示就出来啦。