Focus Ring variables aren't compiled

[probwebdev]

What version of @tailwindcss/jit are you using?

v0.1.5

What version of Node.js are you using?

v14.16.0

What browser are you using?

Firefox, Chrome

What operating system are you using?

elementaryOS(Linux)

Reproduction repository

https://github.com/robertgorbul/detectify-coding-challenge/tree/feature/tailwind-jit

After switching to @tailwindcss/jit on Next.js, TailwindCSS project there're missing -tw-ring-* variables in dev mode (without purgecss)

[adamwathan]

Hey! Sorry I can't really figure out what you mean, the repository you provided is way too big/complex for me to get set up and find the issue, but when I created my own project to test this out with Next, the focus:ring utilities work as I'd expect. I'm not sure what I should be looking at in your screenshot — it looks like all the classes are there with the correct CSS rules.

Going to close this because it appears to work as expected, but if this is still an issue for you please create a new issue that includes an isolated reproduction rather than a full project, as well as a complete description of the problem so I better understand what's being reported. I'm not sure what you mean by missing variables as the variables look like they are present in your screenshot. Sorry if I'm missing something obvious 🤦

[probwebdev]

Thanks for your response. I will try to investigate more and get back to you if I find anything helpful.
Basically when I'm switching to JIT those variables are missing for some reason:

In my first screenshot you can see that Firefox is greying them out and warns that those variables aren't set.
EDIT:
Found out the issue. I didn't include @import 'tailwindcss/base';. Oh my 🤦‍♂️️