windicss是否有方法配置固定的px

[yudan215]

目前windicss的单位是rem，是否有方法可配置成是固定的px，不使用rem，目前在移动端横屏会改变html的文字大小，尺寸没法固定

[ItsRyanWu]

自己配置一份自定义 theme 不可以吗？如果你不想一个一个字段去覆盖的话也可以用 addDynamic 写一个自定义插件，通过获取到 theme 中 spacing 的 rem 去做一个简单的计算 X rem * 16 = Y px 然后输出为 px 单位的数值

[tangxiangmin]

可以通过覆盖theme.spacing来实现

function createSpacing() {
    let ans = {}
    for (let i = 1; i < 1000; ++i) {
        ans[i] = `${i / 100}rem` // 也可以替换成其他的尺寸和单位
    }
    return ans
}

export default defineConfig({
    theme: {
        // spacing:{
        //     100: '1rem'
        // }
        spacing: createSpacing()
    },
}

这种方式虽然看起来有点暴力，但还是比较好用的。

也可以单独定义一个动态工具类，比如rpx-前缀，表示rpx-w-100编译成.rpx-w-100{width:100rm;}

import plugin from 'windicss/plugin'
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
    // ...
    plugins: [
       plugin(({ addDynamic, theme, e, }) => {
            function handleCustomRem(prop: string | string[]) {
                return ({ Utility }) => {
                    return Utility.handler.handleSize()
                        .handleNumber(1, undefined, 'float', (number) => `${number / 100}rem`)
                        .handleNegative()
                        .createProperty(prop)
                }
            }

            // 感觉得把用到的属性都声明一下，还是有点麻烦
            addDynamic('rpx-w', handleCustomRem(['width']))
            addDynamic('rpx-h', handleCustomRem(['height']))
            // ... 
        })
    ],
})

我也是刚接触到windicss，有啥错误的地方请帮忙指正

[ItsRyanWu]

我写了一个插件可以自动将 rem 转换成 rpx，此外还包含对于 windicss 自动值推导兼容的功能，感兴趣可以使用一下：https://github.com/dcasia/wechat-mini-program-tailwind 有 issue 我会及时处理

[yudan215]

我写了一个插件可以自动将 rem 转换成 rpx，此外还包含对于 windicss 自动值推导兼容的功能，感兴趣可以使用一下：https://github.com/dcasia/wechat-mini-program-tailwind 有 issue 我会及时处理

是否支持自定义？例如是PX？

[Elinia]

You can directly use px suffix I think.

e.g. w-100px, p-4px

[Mrlilili]

You can write it like this: ml-[22PX] w-[160PX] h-[160PX], writing it like this will not convert to rem units.