Undocumented breaking change in 1.0.0 - "outline" style is filtered out by the tv() function

[enix79]

Describe the bug

We updated the version of tailwind-variants to 1.0.0 and our regression tests catched a lot of changes, but all regarding the same thing - focus ring.

We implement the focus ring with help of "outline". Usually it looks something like this:

"focus-visible:outline focus-visible:outline-clr-primary focus-visible:outline-1 focus-visible:outline-offset-2"

Color, thickness and offset are preserved and we can see them in the browser, but the style of the outline is not set correctly, because the "outline" tw-class is not there:

Compare here with the old, pre v1.0.0 version: (all 4 styles are there)

We also added a console.log and compared what we put inside the tv() function and what comes out.

Input:

Output:

tv() function clearly filters out the "outline" classes for unknown reason

To Reproduce
Steps to reproduce the behavior:

1. bump tailwind-variants to v1.0.0
2. style a div with outline
3. compare the classes that are returned by the tv() function
4. check the browser dev tools

Expected behavior
We expect the "outline" to be there, like it was in the previuos versions.

Screenshots
It's an issue for all four major browsers.

Desktop (please complete the following information):

Mac, Sonoma 14.7.4
Chrome Verion 133.0.6943.142

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[justadamhopkins]

Its also filtering out divide styles in my codebase so i think it affects more than just outline.

[AGS1130]

It looks like the major upgrade did not touch index.js. Did you/your team upgrade Tailwind from v3 to v4?

[enix79]

No, we are still on version 3. It's v3.4.17.

[enix79]

Is it maybe due to the tailwind-merge bump?

[enix79]

Any news?

[bradleyayers]

@enix79 See dcastil/tailwind-merge#555 (comment). Tailwind-variants 1.0.0 depends on tailwind-merge 3.0.2, so it's not compatible with Tailwind v3 anymore.

For now I'm going to try pinning tailwind-merge to 2.6.0 with Yarn resolutions:

"tailwind-merge@npm:3.0.2": "^2.6.0",

[bradleyayers]

I also just noticed that you can just disable tailwind-merge via the configuration https://www.tailwind-variants.org/docs/config#global-config, if you do this I suspect 1.0.0 should work on tailwind v3.