Scalable Modules using EM

[MrX8503]

I understand for the most part, you want to stick with REMs for simplicity. However, there are times where I want to create a scalable module.

For example https://codepen.io/chriscoyier/pen/tvheK

Another example is if I create a button with x/y padding, I want that padding relative to the font size of the button, not the root.

I'd like to hear what types of solutions people came up with and if there's an easy way to toggle EM vs REM for padding and margin utilities.

[robclancy]

I had just started typing out this exact topic. I keep running into situations where this would help with padding/margins. I often have to add a size parameter to CSS or components because I need to change font size, padding, margin. Font size alone gives situations like this...

I have this set to text-xs on the outer component which works with all the sizes since I don't change any, but the margins/padding is now way off.

I don't think fonts really need to have an em option that much. But margins and padding to scale would be nice. But maybe to be extra flexible this could be a variant that simply switches rem for em. That way it could not be applied on anything by default then people who need it can apply it to margins and padding.

For example: em:mt-1.

[robclancy]

I just made a variant and added it to padding and margin. It is probably riddled with bugs from edge cases or when used on other things, but will be using it for a while to see how it goes.

    require('tailwindcss/plugin')(function({ addVariant }) {
      addVariant('em', ({ container }) => {
        container.walkRules(rule => {
          rule.selector = `.em\\:${rule.selector.slice(1)}`;
          rule.walkDecls((decl) => {
            decl.value = decl.value.replace('rem', 'em');
          });
        })
      })
    })

[robclancy]

I had to use em only a while ago and I basically just copy pasted the config and replaced all rem with em.

If I had to do it now in a "proper" way I would probably just fork tailwind, change all the rem to em and then directly load it from the repository with npm. That way when they update you just merge upstream and edit any new rems.

https://tailwindcss.com/docs/configuration#scaffolding-the-entire-default-configuration
https://unpkg.com/browse/tailwindcss@3.1.8/stubs/defaultConfig.stub.js

[robclancy]

Looking at what I did (I don't remember this btw) it might be possible through a plugin. JIT makes things pretty powerful I think.

[wongjn]

If you are running Tailwind via PostCSS, one could write a PostCSS plugin that runs after Tailwind and replaces all rem values with ems.

[joshsmith]

Thanks for the thoughts @robclancy and @wongjn! I think the PostCSS plugin might be the way to go. This is a popular px to rem plugin that could serve as a decent basis, but it would likely be significantly less complex.

[dane-skipper]

In case anyone stumbles on this thread looking for a simple rem to em plugin, we made one here.
Documentation is a bit lacking, and I haven't gone through the process of getting it added to PostCSS's official plugin list, but it does work for its narrow purpose

[maxpatiiuk]

I need to use em instead of rem because I don't want my web component to be affected by the host page's styles.

As a solution, I wrote this tiny PostCSS plugin, that replaces all occurrences of "rem" with "em" in the output CSS files:

const convertRemToEm = {
  postcssPlugin: 'convertRemToEm',
  // When debugging this, https://astexplorer.net/#/2uBU1BLuJ1 is very helpful
  Declaration(declaration) {
    declaration.value = declaration.value.replaceAll(remRegex, 'em');
  },
};

// Regex to find all occurrences of "rem" units
const remRegex = /(?<=\d)rem/g;

/** @type {import('postcss-load-config').Config} */
module.exports = {
  plugins: [
    // ... your other plugins here
    // Add this plugin:
    convertRemToEm,
  ],
};

Few more things to note:

• Even if you have class name like grid-cols-[1rem_2rem], it will still be using em units
• On one page I wanted to reuse the web component styles, while having 1em = 1rem. Since I controlled the environment on that page, I just added font-size: 1rem; to <body> (make sure to set this style using JavaScript, without using Tailwind class name so that it doesn't get replaced by the PostCSS plugin), which made 1em = 1rem

[shafkathullah]

super fixes shadow root ui issue with parent root fontSize while using tailwindcss.