Arbitrary variants not working after upgrading to TW v4

[pavle-dejanovic-sallyengineering]

After upgrading to Tailwind CSS v4, some of my arbitrary variants that were working in v3 no longer apply styles as expected. Specifically, selectors using :has() and other advanced patterns are not functioning.

Example of a previously working class:
[&:has([aria-selected])]:text-white

These were applied to elements in my React + Tailwind + React Day Picker setup but stopped working after the upgrade.

Is there a new approach required for using these kinds of arbitrary variants?

[adamwathan]

Hey! Can you provide a reproduction? I tested your class and it works here:

https://play.tailwindcss.com/HBp2j0mbML

[wongjn]

Could also be that React Day Picker's CSS is overridding Tailwind's. Try @importing its styles inside a @layer in the Tailwind CSS file like:

@import "tailwindcss";
@import "react-day-picker/style.css" layer(components);

[pavle-dejanovic-sallyengineering]

Thanks for the responses! The problem turned out to be related to class prioritization within the configuration of react-day-picker, which was affecting the expected styling.