Not all variants are available (Tailwind + Vite + React)

[edgarasben]

What version of @tailwindcss/jit are you using?

v0.1.13

What version of Node.js are you using?

v14.15.1

What browser are you using?

Safari

What operating system are you using?

macOS

Reproduction repository

https://github.com/edgarasben/bulletproof-ui/

I am trying to access all variants from JIT documentation, but they do not seem to work.

I've tried these few from the documentation
<input class="disabled:opacity-75">
and
<button class="md:dark:disabled:focus:hover:bg-gray-400">

My setup is: Tailwind + Vite + React

What am I getting wrong here? Do I need to extra configuration?

[adamwathan]

Hey! I can't reproduce, seems to be working as expected — when I add the disabled attribute to the input the disabled:opacity-25 class kicks in just like it's supposed to:

Screen.Recording.2021-03-27.at.1.08.21.PM.mov

Same with the button, once I add the dark class to the HTML element and make the button disabled, the styles kick in on hover+focus at the md breakpoint:

Going to close since I think this is maybe just expecting the feature to work differently — feel free to open another issue with a really clear/minimal reproduction though if I'm misunderstanding.

[edgarasben]

Hi, Adam! You are right, it's working perfectly. It's just me getting confused about the disabled state. Thank you!