Catalyst components have contradicting class names

[ben519]

Just re-installed Catalyst (Typescript) components after upgrading tailwind to v4 and now I have a bunch of these warnings:

'data-focus:outline-2' applies the same CSS properties as 'data-focus:outline'

The affected components appear to include:

• avatar
• badge
• dropdown
• listbox
• table

[reinink]

Hey @ben519, thanks so much for pointing this out! We recently upgraded all of our site templates from Tailwind CSS v3 to v4, and we missed these conflicting classes 😩

I've just updated the template and pushed a new version up, so you can download it again from the Tailwind UI website, or just make these changes yourself, which you probably already have.

Basically you just need to remove the unnecessary "outline" class now and just keep the one with a size. For example:

- 'focus:outline-hidden data-focus:outline data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500',
+ 'focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500',

Sorry about that, and thanks so much for reporting this! 🙏