How to generate font-size unit as em instead of rem in windicss?

Question

Using windicss with vuejs project, I found that its generating font-sizes as rem unit. e.g.

<div class="text-sm">Test</div>

generating css as

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}

Is there any way to generate sizes as em? so font-size: .875em

Answer 1

There could be a few ways (manually extending spacing to use em or creating a variant to apply to convert rem to em).

For the latter, you can check out this Tailwind GitHub issue.
https://github.com/tailwindlabs/tailwindcss/discussions/3105

---

Demo: https://play.tailwindcss.com/XFYT5WFump
(Not mine but in the github issue)

The usage of the plugin is

em:text-sm

, which generates following output,

.em\:text-sm {
    font-size: 0.875em;
    line-height: 1.25em;
}

and the code for the plugin is,

const colors = require('tailwindcss/colors')

/// https://github.com/tailwindlabs/tailwindcss/discussions/3105

module.exports = {
  theme: {
    extend: {
      colors: {
        'light-blue': colors.lightBlue,
        cyan: colors.cyan,
      },
    },
  },
  variants: {
    fontSize: ({ after }) => after(['em']),
  },
  plugins: [
    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');
          });
        })
      })
    }),
  ],
}

---

I also created a similar ("unmaintained" for now) plugin a while ago,
https://github.com/downwindcss/variant-units

so if you want to support other units, you can check it out.