Add screen breakpoints dynamically

[alinaserinet]

I need to add screen breakpoint dynamically, Is there a way?
I store button classNames in an Object with this structure:

const button = {
     color: {
         red: 'bg-red-100 ...',
         green: 'bg-green-100 ...'
         ...
     }
     ...
}

actually this is a basic class variants.

Now I need to define responsive class variants, for example I need to define red button for mobile size, and green button for desktop size.
I pass a prop like: color: {xs: 'red', lg: 'green'} into Button component, and need an util to generate responsive classNames.

But as you know using tailwind we can't add breakpoints dynamically. I tried to generate a responsive className, and the output string is Okay but styles not applied.

What solution do you suggest to solve this problem?

I can use a tool like CVA for class variations but I need a mechanism for responsive variants.