Add support for custom seperator in variant group.

[1821746019]

The prettier-tailwindcss-plugin will cannot work well with variant group syntax. It tamper the original logic.

<DrumMachineBox css={[tw`landscape:(w-full aspect-video max-w-4xl )`]} />

wiil be formatted to

<DrumMachineBox css={[tw`landscape:(w-full ) aspect-video max-w-4xl`]} />

Additionally, there is a hope for official variant group supporting. The option A: Comma was voted most.

So, I think this feature request is reasonable.

https://x.com/adamwathan/status/1849509712368226792

<DrumMachineBox css={[tw`landscape:(w-full,aspect-video,max-w-4xl)`]} />

[ben-rogerson]

Hey there - thanks for letting me know about that poll.
Great to see variant grouping might be coming to Tailwind!

I'm hesitant to implement the feature ahead of a Tailwind release - they may still change the syntax + theres a chance it'll "just work" once it's released in Tailwind as Twin uses some of the Tailwind codebase.

[1821746019]

Hi Ben,

Thanks for your response. I completely understand your hesitation about implementing this feature before Tailwind’s official release. I agree that the syntax might change, and Twin will likely sync up with Tailwind’s final version once it's out.

That said, my main concern is that prettier-plugin-tailwindcss currently formats the code incorrectly with the variant group syntax. It would be really helpful if Twin could support a custom separator, specifically using a comma (,) instead of a space, as the separator for variant groups. This would prevent Prettier from misformatting the code and make it easier for users adopting the new syntax.

If this could be done in a non-breaking way, it would significantly improve the user experience.

Looking forward to your thoughts!