How to place rem to vw

[ShaneLee-9]

I want to replace all units with vw at once.

In our project, we use vw as a means of adapting to mobile. For example, in a 750px design draft, I have a div with a width of 100px, and I want to write w-100 or w-[100px] directly when using UnoCSS, and the build outputs width: 13.3333vw. I would like to apply this solution to all rules (etc. height, margin, padding and more ).

I've done some searching, but unfortunately I didn't find a solution.

[Shyam-Chen]

class="w-16 md:w-32 lg:w-48 xl:w-52"

[ShaneLee-9]

Thank you for your answer, but it's not what I was looking for. Using the code you provided as an example, I want the w-16 output to be width: 4.2666vw, not width: 4rem;.
Since our project requirement is to make the mobile presentation consistent, we don't need breakpoints, we just need to make the size of each element set to vw.

[asd8855]

Try it
// uno.config.ts
postprocess: [
(util) => {
// implement postcss-pxtorem
const pxRE = /(-?[.\d]+)px/g;
util.entries.forEach((entry) => {
const value = entry[1];
if (typeof value === 'string' && pxRE.test(value)) {
// 100 is [rootValue] of postcss-pxtorem in my project
// eslint-disable-next-line no-param-reassign
entry[1] = value.replace(pxRE, (_, pixelValue) => ${pixelValue / 100}vw);
}
});
}
]

[asd8855]

@ShaneLee-9 Try it

[ShaneLee-9]

Thanks, It makes my project working!