Arbitrary variants not working after upgrading to TW v4 #16599
-
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: 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? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments
-
Hey! Can you provide a reproduction? I tested your class and it works here: |
Beta Was this translation helpful? Give feedback.
-
Could also be that React Day Picker's CSS is overridding Tailwind's. Try @import "tailwindcss";
@import "react-day-picker/style.css" layer(components); |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
Could also be that React Day Picker's CSS is overridding Tailwind's. Try
@import
ing its styles inside a@layer
in the Tailwind CSS file like: