在鸿蒙手机调试或者打包，通过tailwindcss 设置的任意值的样式在uni-app中全部失效

在鸿蒙手机调试或者打包，通过tailwindcss 设置的任意值的样式在uni-app中全部失效

开发环境 版本号 项目创建方式
Windows win11 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS 5.1.1

手机厂商：华为

手机机型：meta60

页面类型：vue

vue版本：vue3

打包方式：云端

操作步骤：

直接写 w-[120rpx] 无效

预期结果：

能正常识别任意值样式；

实际结果：

无效

bug描述：

【报Bug】在鸿蒙手机调试或者打包，通过tailwindcss 设置的任意值的样式全部失效。失效的样式例如： text-[#999999], w-[120rpx]


更多关于在鸿蒙手机调试或者打包，通过tailwindcss 设置的任意值的样式在uni-app中全部失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于在鸿蒙手机调试或者打包，通过tailwindcss 设置的任意值的样式在uni-app中全部失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙系统下，TailwindCSS 任意值样式失效的主要原因是鸿蒙系统对 CSS 自定义属性的解析机制与标准浏览器存在差异。TailwindCSS 的任意值功能（如 w-[120rpx]）依赖 CSS 变量实现，而鸿蒙的 WebView 内核可能未完全兼容此特性。

解决方案：

  1. 检查 TailwindCSS 配置：确认 tailwind.config.js 中已启用任意值功能：

    module.exports = {
  content: ['./src/**/*.{vue,js,ts}'],
  // 启用任意值支持
  safelist: [
    { pattern: /./ }
  ]
}

  2. 替换为静态类名：将动态样式改为预定义的静态类名，例如在配置中扩展：

    theme: {
  extend: {
    width: {
      '120rpx': '120rpx'
    }
  }
}

    使用时改为 w-120rpx。

  3. 使用行内样式替代：对需要动态调整的样式，改用 :style 绑定：

    <view :style="{ width: '120rpx' }"></view>
回到顶部