在uniappx中，如何可以把默认单位转为px呢？

[hujinchen]

现在好像只支持这个配置：rem2rpx: true。 我想把所有的单位默认都转为px要如何实现

[sonofmagic]

@hujinchen 这个 rem2rpx 和 px2rpx 都只是把 rem / px 这种 css 单位，转换成 rpx

你的需求是 所有 css 单位，不论是 rem,vw,vh, rpx 都转换成 px?

这个恐怕实现起来会有一些变扭，我想知道你什么场景下，需要这种行为呀?

[hujinchen]

就是说在uniappX中官方推荐用的长度单位是px。性能也好。不管是rpx还是百分比单位，都需要在运行时再计算，转换为时间的px进行渲染。 我目前只能一个个转换单位。如图 涛 ***@***.***

[sonofmagic]

你想要的这个功能，可以通过编写 postcss 插件来做到，当然，你需要提前定义好，各个css单位转化成 px 的规则，这个实现起来其实挺容易的，主要是你这个规则怎么做转化。

[hujinchen]

我不会，大佬你内置一个呗。后面uniappx用的人多起来的话，应该很多人都想要这样用 涛 ***@***.***

[sonofmagic]

@hujinchen
也可以，那你告诉我一下，你大概有哪些 css 单位，想要被转化成 px，毕竟你看 CSS单位 20多个，我也不可能所有单位都兼容的。

[hujinchen]

可以参考下这篇文档：https://doc.dcloud.net.cn/uni-app-x/css/common/length.html 我想要的是，如果原tailwindcss中的单位是 rem或rpx、em的话，可以通过一个配置默认转为px。 然后如果原tailwindcss中的单位是用%、vw、vh等这些就不用转了。 涛 ***@***.***

[sonofmagic]

@hujinchen
在 4.9.8 版本中，我添加了 unitsToPx 配置，这个可以 进行 多单位转 px 的转换配置。
详见 https://tw.icebreaker.top/docs/api/options/important#unitstopx
和 https://tw.icebreaker.top/docs/quick-start/css-unit-transform#%E5%A4%9A%E5%8D%95%E4%BD%8D%E8%BD%AC-pxunitstopx

[hujinchen]

感觉没生效啊，最终生成的单位还是rem。 还有我如何可以1比1的转换呢？就比如我输入w-80 输出width:80px; mr-10 输出margin-right:10px. 涛 ***@***.***

[sonofmagic]

我是在这个分支做的测试
https://github.com/icebreaker-template/uni-app-x-hbuilderx/tree/debug

然后我看所有css 单位转换成 px 是生效的

unpackage/dist/dev/.uvue/app-android/components/WeappTailwindcss.uvue

编译的中间产物都是固定的 px 值

        UnifiedViteWeappTailwindcssPlugin(
            uniAppX({
                base: __dirname,
                unitsToPx: true
            }),
        ),

[sonofmagic]

1比1的转换的话，你可以去更改 tailwind.config.js
https://v3.tailwindcss.com/docs/configuration
把你的规则写进去
当然更好的方式可以把你的规则，提炼成一个 tailwindcss 插件

[hujinchen]

你这还有个bug。 只要我再uts中 在类名前面加上！在app端编译出来的结果有问题！ ！会被编译为_e了， 在web端则无此问题。小程序端好像也会有问题。 涛 ***@***.***

[sonofmagic]

这个是因为 tailwindcss 中比如一个类名之前或者之后加上 !, 比如 !w-0 这就变成了 !important 的 css
这也是有意义的，而小程序类名是不支持 ! 这个字符的，所以就被转译成了 _e 来让小程序支持，uni-app-x 同理
这是一个预期的行为
详见 https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier

[hujinchen]

你这项目跑起来也是一样啊， unitsToPx: true 设置后 并没有改变最终输出的单位是px。 涛 ***@***.***

[sonofmagic]

现在打开了 unitsToPx: true 之后，单位会按照

   * {
   *   rem: 16,
   *   em: 16,
   *   vw: 3.75,
   *   vh: 6.67,
   *   vmin: 3.75,
   *   vmax: 6.67,
   *   rpx: 0.5
   * }

这样的规则进行转换，最终变成 px

[hujinchen]

不是，转义归转义，但是这样变成只有在web端才有效果了。 无论输出的是什么类名，它没有加上 !important 且 样式也没有生效，这就不对了！ 涛 ***@***.***

[sonofmagic]

小程序和 Web 都是有效果的

[hujinchen]

哦哦，那还是跟我之前做法差不多。我以为让你加的这个转px的功能就是1比1的转换。我写个 w-50 输出结果就是width: 50px. 不是这样理解的嘛 涛 ***@***.***

[sonofmagic]

我实现的这个功能，实际上可以这样理解:

// 输入
const input = '.rule { margin: 1rem 1em 1vw 1vh 1vmin 1vmax 1rpx; }'
// 输出
const output = '.rule { margin: 16px 16px 3.75px 6.67px 3.75px 6.67px 0.5px; }'

[hujinchen]

啊，是这样用的么。 但是好像也是没生效的。这个单位也是没转换过来。 为啥 涛 ***@***.***

[hujinchen]

我发现我的问题了，我是在我的组件外传一个属性他不生效的， 例如：!text-red-500 <t-loading mainColor="#999999" text="加载中..."&nbsp;:pt="{ textClass:'text-xl !text-red-500'&nbsp;}"&nbsp;/&gt; 我如果直接在这个t-loading组件里写 !text-red-500 他是生效的。通过属性传参就不生效了。 这是在app端出现的问题. 打印结果变成： text-xl !text-red-500。 正常应该是&nbsp; text-xl _etext-red-500 这是哪里的问题呢 涛 ***@***.*** 原始邮件 发件人：ice breaker ***@***.***&gt; 发件时间：2026年2月8日 14:46 收件人：sonofmagic/weapp-tailwindcss ***@***.***&gt; 抄送：hujinchen ***@***.***&gt;, Mention ***@***.***&gt; 主题：Re: [sonofmagic/weapp-tailwindcss] 在uniappx中，如何可以把默认单位转为px呢？ (Discussion #798) 小程序和 Web 都是有效果的 image.png (view on web) image.png (view on web) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

[sonofmagic]

这种组件透传自定义prop字段的场景，需要使用 customAttributes

详见 https://tw.icebreaker.top/docs/api/options/important#customattributes

因为 weapp-tailwindcss 默认只会转换 class 和 hover-class ，假如要自定义转化字段的话，那就需要去设置这个配置

@hujinchen

[hujinchen]

可以了，感谢 涛 ***@***.***