[v4] Invalid property value, expected type "*"

[gelmio]

Broken view:

With error tooltip hover:

The property that's breaking:

Without !important:

I'm having an issue with v4 where variables can't be set, and I can't use utility classes like ring-inset. This seems to be due to the new properties constraints. The issue is caused by !important flag, which, when I remove it, it works again and the property is no longer classed as invalid.

I'm in the unfortunate position of needing to keep both the old JS configuration file, as well as the important key in order to force all tw styles to be !important. I need these because I'm using tailwind alongside some legacy css in an existing project, and so I need the !important in order to override many of these old styles.

Here's one of our deployed storybooks where you can see the issue if you inspect any of the inputs and set the focus-visible flag.

Does anyone have any advice? Is there a way of removing the property constraints in v4?

[wongjn]

Seems to be a Chrome devtools bug, see #16873. As per this Tailwind Play the ring-* utilities still seem to work even though they show as invalid in Chrome:

[gelmio]

Thanks for the response :)

Good to know that these are still working; I'd made a poor assumption that these warnings were the reason that the ring color wasn't working in the app, but it must be something else!! The hunt continues 😅