What am I missing to get the "focus-within" variant to work?

[JLHasson]

Describe the problem:

I am unable to reproduce the focus-within example from the docs. All I did in this example was copy the code directly from the linked doc and try to verify that the effect shown in the doc indeed showed in my browser.

I saw this on Safari Version 13.0.5 (15608.5.11) and Chrome Version 85.0.4183.121 (Official Build) (64-bit).

Also, should I be able to use focus-within: on a parent div? That's the actual use case I'm going for in my application.

Link to a minimal reproduction:

I am using next.js, you can see a sample repository reproducing the issue here: https://github.com/JLHasson/repro-focus-within

HTML/CSS definitions are here: https://github.com/JLHasson/repro-focus-within/blob/master/pages/index.js

And here is a live running deployment of this reproducing code: https://repro-focus-within.vercel.app

[smetzdev]

Hey @JLHasson
At least in your reproduction repo, you just forgot to add the particular variants to your variants-object inside tailwind.config.js:

variants: {
    borderColor: ['responsive', 'hover', 'focus', 'focus-within'],
}

[JLHasson]

Ah! I saw that section of the doc but didn't realize it was necessary for it to work. Why aren't things like focus-within: just included by default? Will close once I'm at the computer and can verify that fix. Thanks for the help 😄

[simonswiss]

Hey @JLHasson - I converted your issue into a discussion, as I suspect that it will be helpful to more people down the road.

focus-within is indeed not enabled on any core plugin by default, mostly because of the insufficient browser compatibility (see polyfill suggestion), as well as trying to control the compiled CSS file size.

I have already marked the answer above as correct, but if you are still having issues with it, please follow-up here! 👍

[JLHasson]

Can confirm that including it in the variants fixed it 👌 sorry for my confusion and thanks for the help!