求助：WindiCSS/Unocss未生成font-size，却错误生成color样式

为啥会出现这情况？UnoCSS默认规则里，text-开头的类名对应CSS的color属性，所以text-$xl自然会被解析为设置文字颜色，而非你需要的字体大小。下面给你几种实用解决办法：

办法1：用UnoCSS自带的字体大小前缀 #

直接把text-$xl改成text-size-$xl即可，这是UnoCSS预设里专门用来设置字体大小的标准写法：

<h1 class="bg-$grey text-$success text-size-$xl">You did it!</h1>

生成的CSS就是你想要的效果：

.text-size-\$xl {
    font-size: var(--xl);
}

办法2：自定义UnoCSS规则，保留text-$xl写法 #

要是你坚持想用text-$xl的写法，就在UnoCSS配置里添加自定义规则，强制指定这个类名对应font-size属性：

修改你的Vite配置文件，调整Unocss的配置部分：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { presetUno } from 'unocss'

export default defineConfig({
  plugins: [
    vue(),
    Unocss({
      presets: [presetUno()],
      rules: [
        // 精准匹配text-$xl，映射到font-size
        [/^text-\$xl$/, () => ({ 'font-size': 'var(--xl)' })],
        // 如果你还有其他类似变量（比如--lg、--sm），可以用这个通用正则
        // [/^text-\$(\w+)$/, ([, name]) => ({ 'font-size': `var(--${name})` })]
      ]
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

配置完成后，text-$xl会生成你需要的font-size: var(--xl)样式，同时不影响text-$success这类设置文字颜色的类名正常工作。

办法3：全局修改text-默认映射（不推荐） #

如果你想把所有text-开头的类名都改成对应font-size，也能实现，但这会打乱其他text-类的原有功能（比如text-red无法再设置文字颜色），所以除非你明确有全局修改的需求，否则不建议使用。

推荐做法 #

优先选择办法1，遵循UnoCSS的预设规范，后续维护成本更低；必须保留原有类名时，再使用办法2的自定义规则。

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