在Vue项目中使用WindiCSS时，如何将字体大小单位从rem改为em？

当然可以实现！WindiCSS的配置灵活性很高，完全支持自定义字体大小的单位，下面是具体的操作步骤：

• 找到或创建WindiCSS配置文件
  先打开项目根目录下的windi.config.js（如果你的项目里还没有这个文件，直接新建一个即可）。

• 自定义字体大小主题
  在配置文件中，通过theme.extend.fontSize重新定义你需要的字体尺寸类，把默认的rem单位替换成em。如果想保留原有的字号比例，直接把对应数值的单位改成em就行，连带着行高也可以一起调整：

export default {
  theme: {
    extend: {
      fontSize: {
        'xs': ['.75em', { lineHeight: '1em' }],
        'sm': ['.875em', { lineHeight: '1.25em' }],
        'base': ['1em', { lineHeight: '1.5em' }],
        'lg': ['1.125em', { lineHeight: '1.75em' }],
        'xl': ['1.25em', { lineHeight: '1.75em' }],
        '2xl': ['1.5em', { lineHeight: '2em' }],
        // 其他你用到的字号都可以按照这个格式添加
      },
    },
  },
}

• 验证效果
  配置完成后重启你的Vue项目开发服务，现在再使用<div class="text-sm">Test</div>时，生成的CSS就会变成：

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

这种方法的好处是你可以完全掌控每个字号的具体数值和单位，避免全局替换可能带来的意外问题。如果需要覆盖所有默认的字号类，也可以直接用theme.fontSize而不是theme.extend.fontSize，这样会完全替换掉Windi的默认配置。

内容的提问来源于stack exchange，提问作者coure2011