🐛 Bug in CSS parser for Tailwind: custom variants with `()` syntax not supported

[PaulRBerg]

Environment information

Biome v2.3.2

What happened?

Biome is unable to parse this Tailwind custom variant:

@custom-variant max-xxs (@media (max-width: 320px));

Getting this error:

Expected a selector but instead found '@'.

But this is valid syntax according to the Tailwind docs.

Playground link

Expected result

Biome should be able to parse this Tailwind syntax.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[dyc3]

According to the docs, it looks like you should be using this syntax:

@custom-variant any-hover {
  @media (any-hover: hover) {
    &:hover {
      @slot;
    }
  }
}

AFAIK, what's in the parenthesis in the shorthand version is any CSS selector, of which @media is not.

Can you find any other docs for this?

[PaulRBerg]

hmm, you might be right @dyc3. I need to double-check this, though, as I think my syntax is working (but maybe I'm fooling myself somehow).

[PaulRBerg]

Looks like the syntax is valid albeit not being explicitly documented in the Tailwind v4 docs.

min-lg is used like this in HTML:

<div className="min-lg:text-green-500">
  min-lg (≥992px): <span className="min-lg:hidden">❌ Not active</span>
  <span className="hidden min-lg:inline">✅ ACTIVE</span>
</div>

[ematipico]

We should check the tests