跳到主要内容

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提示插件一起使用的。

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

这里我们以 vscode 为例:

接着找到 Tailwind CSS IntelliSense扩展设置

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

如图所示

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