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 https://github.com/dcastil/tailwind-merge/issues/555#issuecomment-2760355084. 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.

[jrgarciadev]

as @bradleyayers mentioned before, tailwind-merge 3.0 is not compatible with tailwind ^3, hence tailwind v4 functions and breaking changes should be solve in your end before upgrading to tailwind-variants v3