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

Question

将windicss与vuejs项目一起使用，我发现它生成的字体大小为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

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

Answer 2

如果有帮助，您可以覆盖文件

fontSize

中

spacing

和

tailwind.config.js

的默认值。

由于其他类都是基于

spacing

变量，因此它们也会更新:

extend: {
  fontSize: {
    xs: '0.75em' /* 12px */,
    sm: '0.875em' /* 14px */,
    md: '1em' /* 16px */,
    lg: '1.125em' /* 18px */,
    xl: '1.25em' /* 20px */,
    '2xl': '1.5em' /* 24px */,
    '3xl': '1.875em' /* 30px */,
    '4xl': '2.25em' /* 36px */,
    '5xl': '2.625em' /* 42px */,
    '6xl': '3em' /* 48px */,
  },
  spacing: {
    0: '0em',
    1: '0.25em',
    2: '0.5em',
    3: '0.75em',
    4: '1em',
    5: '1.25em',
    6: '1.5em',
    7: '1.75em',
    8: '2em',
    9: '2.25em',
    10: '2.5em',
    11: '2.75em',
    12: '3em',
    14: '3.5em',
    16: '4em',
    20: '5em',
    24: '6em',
    28: '7em',
    32: '8em',
    36: '9em',
    40: '10em',
    44: '11em',
    48: '12em',
    52: '13em',
    56: '14em',
    60: '15em',
    64: '16em',
    72: '18em',
    80: '20em',
    96: '24em',
  },
 }