Is there a better solution or plugin for converting px in w-[50px] to rem or vw?

[wangrongding]

Is there a better solution or plugin for converting px in w-[50px] to rem or vw?

I'm using vue3 with the postcss-px-to-viewport library, but it can't handle w-[50px] between lines, only properties with px in the style tag🥲

[wangrongding]

I am waiting for a good solution here~🤝

It is not a good method to write like this, because there are many properties. ↓

[benoitdelorme]

I'm doing this:

const plugin = require('tailwindcss/plugin')
const postcss = require("postcss")
const designWidth = 1440

[...]

plugin.withOptions(() => {
    return function ({ addVariant }) {
        addVariant('vw', ({container}) => {
            let styles = []
            
            container.walkRules((rule) => {
                rule.walkDecls((decl) => {
                    styles.push({
                        value: decl.value.split('px')[0],
                        prop: decl.prop
                    })
                })
                rule.removeAll()
                
                styles.forEach(style => {
                    rule.prepend(postcss.decl({prop: style.prop, value: `${style.value * 100 / designWidth}vw`}))
                });
            });
        })
    };
})

You can use it like vw:w-[300px], vw:mt-[100px] etc...

[wongjn]

Are you running postcss-px-to-viewport in the same pipeline that Tailwind is running in? Try including the plugin after Tailwind.

[wangrongding]

@wongjn I am now officially using Nuxt3. I don't think the method you mentioned provides a configuration solution, right?🥲🥲🥲

[wongjn]

If you have a similar setup for Tailwind as the Tailwind Nuxt 3 integration guide, you should be able to add postcss-px-to-viewport after the Tailwind CSS PostCSS plugin.

[wangrongding]

🌸Thanks for your answer, if you don't consider whether it's Nuxt or not, may I ask how to set postcss-px-to-viewport to tailwind after it?

[wongjn]

If one runs Tailwind via PostCSS, one should be able to add postcss-px-to-viewport as a plugin after Tailwind, via configuring postcss.config.js or similar.

[herman7]

This works well with tailwind version v3, I didn't find a good way to config it well in v4 after a long time to try

[ursazoo]

hi guys, any good solutions?

[wongjn]

Try #9869 (reply in thread)