windicss not generating font-size, instead its generating color

Question

// base.css
:root {
    --grey: grey;
    --success: green;

    --xl: 20px;
}

and in my component

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

the css for text-$xl is generating as

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

how to force it to generate as font-size: var(--xl)???

my uno config is

export default defineConfig({
  plugins: [
    vue(),
    Unocss(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

Answer 1

With your setup just use font-size-$xl instead of text-$xl

But I would move all custom colors/sizes to the unocss config file. After that text-xl will grab your xl value for sure.