如何在 windicss 中将字体大小单位生成为 em 而不是 rem？

Question

在 vuejs 项目中使用 windicss，我发现它生成的字体大小是 rem 单位。例如

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

正在生成 css 作为

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

有什么方法可以生成 em 尺寸吗？所以 font-size: .875em

Answer 1

可能有几种方法（手动扩展间距以使用 em 或创建变体以应用将 rem 转换为 em）。

对于后者，您可以查看此 Tailwind GitHub 问题。
https://github.com/tailwindlabs/tailwindcss/discussions/3105

演示：https://play.tailwindcss.com/XFYT5WFump
（不是我的，而是在 github 期）

插件的用法是

em:text-sm

，生成以下输出，

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

插件的代码是，

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');
          });
        })
      })
    }),
  ],
}

不久前我也创建了一个类似的（目前“未维护”）插件，
https://github.com/downwindcss/variant-units

所以如果你想支持其他单位，可以去看看

如何在 windicss 中将字体大小单位生成为 em 而不是 rem？

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

css

tailwind-css

windicss