disabling rem conversion

[duanchunjiao]

When can we support disabling rem conversion? For example, m-1 is converted to margin: 0.25rem. I want the project to support vw, but it's a bit inconvenient because the built-in properties are converted. Otherwise, vw is actually very suitable for adaptive layouts.

[rozsazoltan]

I'm not sure I fully understand the goal without an example, but in TailwindCSS v4, padding, margin, and other values are all multiples of a central --spacing. If you change this from the default rem-based values to vw-based, you can make the project use viewport-width units instead.

@theme {
  --spacing: 1vw; /* default: 0.25rem */
}

• https://play.tailwindcss.com/QoLkwI37E6?file=css

[duanchunjiao]

Yes, --spacing: 1vw works. However, I noticed that when I add font-size: 18px to the index.css file I created, the postcss-px-to-viewport-8-plugin can convert it to the vw unit. But for text-[18px] (Tailwind’s arbitrary value syntax) and other Tailwind CSS code, the postcss-px-to-viewport-8-plugin doesn’t seem to transform them.

[rozsazoltan]

You need to make the text-* utility smarter for --value([length]) arbitrary values. What mathematical formula would you use to convert 12px into 3.2vw?

[duanchunjiao]

Wow, your reply was so timely—thank you for your patient response!

The screenshot I showed earlier was just an example: in the TSX files, the text-* utility classes were not converted to vw units. However, in the index.css file, the text-* classes can be properly converted to vw. I have some confusion about this inconsistency.

Typically, I base my unit conversions on a 375px UI design draft, where the rule is 100vw = 375px. Following this logic:

text-[12px] should convert to 3.2vw
text-[30px] should convert to 8vw

But as shown in the screenshot above, the text-* classes in the TSX file weren’t converted to vw at all.

[rozsazoltan]

I think your issue might be with the plugin order. TailwindCSS should always run first, followed by any other plugins.

I quickly put together a plugin that detects px values in font-size and converts them to vw using your formula. TailwindCSS needs to run first, then this new plugin afterward (the order matters).

postcss-vw-plugin.js

// Conversion factor: 100vw / 375px
const PX_TO_VW = 100 / 375;

const vwPlugin = () => {
  return {
    postcssPlugin: "postcss-vw-plugin",
    Declaration(decl) {
      if (decl.prop === "font-size") {
        const pxRegex = /(\d*\.?\d+)px/g;
        if (pxRegex.test(decl.value)) {
          const newValue = decl.value.replace(pxRegex, (match, num) => {
            const px = parseFloat(num);
            const vw = (px * PX_TO_VW);
            return `${vw}vw`;
          });
          decl.value = newValue;
        }
      }
    }
  };
};

vwPlugin.postcss = true;

export default vwPlugin;

postcss.config.mjs

import tailwindcss from '@tailwindcss/postcss';
import vwPlugin from './postcss-vw-plugin.js';

export default {
  plugins: [
    tailwindcss(),
    vwPlugin()
  ]
};

index.html

<div class="text-lg">Hello text-lg</div>
<div class="text-[12px]">Hello 12px</div>
<div class="text-[30px]">Hello 30px</div>

The result matched expectations:

/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
@layer theme {
  :root, :host {
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
  }
}

@layer base, components;

@layer utilities {
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  
  .text-\[12px\] {
    font-size: 3.2vw;
  }
  
  .text-\[30px\] {
    font-size: 8vw;
  }
}

The class names naturally remain text-[12px] and text-[30px], since these are referenced in your source code - the plugin only provides the corresponding vw value behind the scenes.

If you set the --spacing value to vw, you can manipulate text-lg with it. I'm currently focusing only on the arbitrary values.

I hope the plugin helps you understand the underlying mechanism and that you can customize it to suit your own needs.

[rozsazoltan]

Besides this, TailwindCSS has excellent overriding capabilities, but unfortunately the formula you're asking for cannot be calculated using TailwindCSS alone (manipulating text without a dedicated PostCSS plugin). While calc(--value([length]) / 375px * 100vw) seems reasonable - since px / px * vw should yield a vw unit - native CSS treats it as invalid syntax.