I’m using CVA to generate class names. I have this function to generate class names for title text:

const title_text = cva(['title-text font-medium font-brand'], {
  variants: {
    size: {
      sm: ['text-title-sm-sm leading-title-sm-sm sm:text-2xl sm:leading-8'],
      md: ['text-2xl leading-8 sm:text-title-md sm:leading-title-md'],
      lg: [
        'text-title-lg-sm leading-title-lg-sm sm:text-title-lg sm:leading-title-lg',
      ],
      xl: [
        'text-title-md leading-title-md sm:text-5xl sm:leading-title-xl',
      ],
    },
  },
})

The classes are all being applied as expected (I can see all 4 font size and line height classes on each element in the chrome dev tools). However, no matter the size of the screen, only the default styles are applying.