Is it possible how we can group multiple classname of breakpoint or hover state

[afu-hive]

for ex.

<div className="md:bg-red-400 md:h-12 md:w-12 hover:bg-red-500 hover:font-bold">
</div>

it would be great to be this

<div className={twMerge({ md: 'bg-red-400 h-12', hover: 'bg-red-500 font-bold' })}>
</div>

Or you guy have any solutions for this
Thank you so much.

[dcastil]

Hey @afu-hive! 👋

tailwind-merge doesn't support this way of grouping multiple classNames (although I'd love to!) because Tailwind CSS doesn't support that way of writing classes. Tailwind CSS relies on the full class name being present in the codebase, otherwise it won't include it in the final CSS file.

You can read about that here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

There is also a discussion for this in the Tailwind CSS repo: tailwindlabs/tailwindcss#8337