Hi there,

i stumbled across a strange behaviour when providing custom variants for fontSizes.

export default defineConfig({
  theme: {
      fontSize: {
        // Working as expected
        'xs': ['17px', { lineHeight: '26px' }],
        'sm': ['18px', { lineHeight: '28px' }],
        'base': ['20px', { lineHeight: '30px' }],
        'lg': ['22px', { lineHeight: '32px' }],
        'xl': ['24px', { lineHeight: '32px' }],
        
        // Not working
        'btn-s': ['12px', { lineHeight: '20px' }],
        'btn-m': ['15px', { lineHeight: '24px' }],
        'btn-l': ['18px', { lineHeight: '28px' }],
        'btn-xl': ['48px', { lineHeight: '32px' }],
      },
    },
})

With the config above i receive valid css for
<p class="text-xs">XS Text</p>

But this class can not be resolved:
<a class="text-btn-s">Small Button caption</a>

Strangely this is getting wrong css:
<a class="text-btn-xl">Small Button caption</a>

text-btn-xl is receiving the same css as text-xl

I couldn't find a section in the docs regarding supported keys or similar. So i assume keys containing a hyphen should work.

Am i doing something wrong? Are hyphens just not supported?

Here a small reproduction repo:

https://stackblitz.com/edit/nuxt-starter-xpg9eu?file=app.vue