Unit modifiers/variants

[vukadinFE]

Hello.
First of all, thanks for the amazing framework. :)

Got a situation where I wanted to control checkbox size (width and height with w- and h- classes) as well as its label by adjusting the font size (with text-SIZE) of a parent element. This would be possible if w- and h- had em unit instead of rem, but I understand the trade-offs.

So it would be more flexible if you add a new modifier or variant.
Some suggestions:
w-2-em
w-3-px
em:h-2
px:h-3

[dance2die]

During mean time, you can roll out a plugin.

I sorta was in need for an em: variants for width/height so I tried it on Tailwind CSS Play.
https://play.tailwindcss.com/TG7EXujAt9?file=config

It required

1. modifying the selector (to add em: variant prefix, <- is this the correct term?)
2. then walking CSS rules (not robust as no multiple rule check here) to replace unites for declaration values containing numbers
   • such as 0.625rem, 12px, 33%, etc.
3. Lastly extend em variants for width/height

const plugin = require('tailwindcss/plugin')

const emVariant = function ({ addVariant, e }) {
  addVariant('em', ({ container, modifySelectors }) => {
    modifySelectors(({ className }) => `.${e(`em:${className}`)}`)

    container.walkRules((rule) => {
      rule.walkDecls((decl) => {
        if (decl.value.match(/^\d\.*\d*/g)) {
          decl.value = decl.value.replace(/\D+$/g, 'em')
        }
      })
    })
  })
}

const emVariantPlugin = plugin(emVariant)

module.exports = {
  variants: {
    extend: {
      width: ['em'],
      height: ['em'],
    },
  },
  plugins: [emVariantPlugin],
}

---

First time dealing with PostCSS thus the code probably isn't optimized.
If needed you can write one for px or other unites or even make it dynamic.

[PeterMerkert]

This problem is quite severe as soon as one does not have control over the html styling of a page. Our scenario are web components which are embedded into a clients webpage. As tailwind works with rem which is based on the html font size and that is unaccessible in a webcomponent.

If our clients' webdeveloper decided to set it html font size to 9px everything gets extremely small and all margins and paddings just do not work anymore.

Thus, as soon as one has no control over the html styling, tailwindcss breaks apart.

[nicklozon]

Same situation here. Currently overriding every theme setting in the tailwind config.

What would work would be to give an option to use em instead of rem.

[huygn]

I was hitting a similar use case where I wanted to replace rem with em, and developed this little helper: https://github.com/huygn/tailwind-unit-replace
Not only supporting rem -> em, you can replace with anything, hope this help :)

[Stu-Marlow]

I have the same situation. For me, the ideal solution would be similar to the css proposal for custom units. For example, being able to create my own 'base unit' that could act like rem (i.e. multiplies the supplied value by a global value), but would obviously not be affected by the issues in the scenario describe by @PeterMerkert

e.g:

imaginary tw config:

    customUnits: {
        'bu': '10px'   //or a custom property or almost any css value
    }

imaginary usage:

w-[60bu]

which would evaluate to:

.w-\[60bu\]{
    width: calc(60*10px)
}