[v4] custom-variant issue in Tailwind CSS with prefix

[reardestani]

I am using Tailwind CSS v4 and have added prefix and a custom variant. Please check this example: https://play.tailwindcss.com/5eHxv2nUUS?file=css

I expected the active tab to have blue background with white text but it's not working as expected.

[wongjn]

Two things:

• Swap the variants applied to the classes so that tw: is always first.
• Escape the colon (:) in your selector with a backslash (\). Without escaping the colon, it is parsed by the browser as the :active pseudo-class.

https://play.tailwindcss.com/vHJrPXJt1C

[reardestani]

Thanks, it worked.