Modifier order issue: variants before arbitrary not selectors fail to apply styles

[ItaiYosephi]

What version of Tailwind CSS are you using?

For example: v3.4.17

What build tool (or framework if it abstracts the build tool) are you using?

For example: postcss" 8.5.3, Vite 6.3.5/7.0.0

What version of Node.js are you using?

For example: v22.11.0

What browser are you using?
Chrome

What operating system are you using?

macOS

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-tzng15gi?file=index.html,src%2FApp.tsx

Describe your issue

When using Tailwind CSS with custom variants and arbitrary selectors, there's an issue with the order of modifiers affecting whether styles are applied correctly.

Specifically, when a variant like focus-visible: or hover: is placed before an arbitrary selector that contains :not(), the styles don't get applied.

Working example:

<div data-focus-visible="true" className='[&:not([aria-selected="true"])]:focus-visible:bg-red-500'>
  working
</div>

Non-working examples:

<div data-focus-visible="true" className='focus-visible:[&:not([aria-selected="true"])]:bg-red-500'>
  not working
</div>

<div className='hover:[&:not([aria-selected="true"])]:bg-red-500'>
  also not working
</div>

This appears to be related to how the CSS selectors are generated and composed when variants are applied in different orders. The issue occurs with custom variants (like my implementation of focus-visible) as well as built-in variants like hover:.

IntelliSense's hover preview does get it right though:

Expected behavior

Both ordering approaches should work and apply the styles correctly, regardless of whether the variant is placed before or after the arbitrary selector.

[wongjn]

Thank you for providing a reproduction. I did some quick testing:

• Removing the quotes from the non-working examples in StackBlitz makes them work.
• All the examples work with quotes in Tailwind Play

I wonder if this is just a StackBlitz issue? Or perhaps with the tech stack somehow?

Edit: It could also be due to the difference in parser between Tailwind Play and the node package.

[ItaiYosephi]

@wongjn thanks for your reply.
Don't think it's related to StackBlitz, we experience this issue in our project.
Our stack is similar to the one in stackblitz - vite, postcss, react.
And we use double quotes.

[wongjn]

Yep, did some more in depth debugging locally and it seems there is a bug with the class names candidate extractor. Looking at the return from:

tailwindcss/src/lib/defaultExtractor.js

Line 44 in 4f9f603

return results

For the line className='focus-visible:[&:not([aria-selected="true"])]:bg-red-500' we get:

[
  "className",
  "focus-visible:[&:not([aria-selected=\"true\"])]",
  "bg-red-500",
  "className='focus-visible:[&:not([aria-selected=\"true\"])]:bg-red-500",
  "className",
  "focus-visible",
  "&:not",
  "aria-selected",
  "true",
  ":bg-red-500",
  "className",
  "focus-visible:[&:not([aria-selected=\"true\"])]",
  "bg-red-500",
  "className='focus-visible:[&:not([aria-selected=\"true\"])]:bg-red-500",
  "className",
  "focus-visible",
  "&:not",
  "aria-selected",
  "true",
  ":bg-red-500",
]

Notice how focus-visible:[&:not([aria-selected=\"true\"])]:bg-red-500 is not in this list.

[ItaiYosephi]

Interesting, are there any plans to address this in an upcoming release?

[RobinMalfait]

Technically speaking it is solved in a future release, but it will require you to migrate your project to Tailwind CSS v4. Is there a specific reason you are still on Tailwind CSS v3?

We have an upgrade guide (and an upgrade tool) that should help with this: https://tailwindcss.com/docs/upgrade-guide

Bonus points is that you can simplify these classes in Tailwind CSS v4 as well:

- hover:[&:not([aria-selected="true"])]:bg-red-500
+ hover:not-aria-selected:bg-red-500

[bengry]

Technically speaking it is solved in a future release, but it will require you to migrate your project to Tailwind CSS v4. Is there a specific reason you are still on Tailwind CSS v3?

The main blocker is francoismassart/eslint-plugin-tailwindcss#325, which is essentail when working with Tailwind since it is the thing that avoid typos getting into the codebase. i.e. nothing else catches this

<div class="text-whit"></div> <!-- missing `e` in `whit**e**` -->
<div class="aria-selectd:text-whit"></div> <!-- missing `e` in `select**e**d` -->

It's a community/single owned-maintained plugin, but I think its integral to using Tailwind in any project, or a solution like it. I saw that https://github.com/schoero/eslint-plugin-better-tailwindcss exists, but it doesn't have all the same rules (e.g. schoero/eslint-plugin-better-tailwindcss#140).