nesting @variant in @utility not working

[stefanprobst]

What version of Tailwind CSS are you using?

4.1.16

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

n/a

What version of Node.js are you using?

22.21.

What browser are you using?

firefox

What operating system are you using?

linux

Reproduction URL

https://play.tailwindcss.com/4IeG0AH5t1

Describe your issue

Nesting @variant inside of @utility is only working when the @variant block comes last, but not when it comes first (cf. the working and not-working utilities in the play.tailwind repro link above)

[wongjn]

It works as expected. The utility produces the following CSS:

.not-working {
  @media (width >= 40rem) {
    color: blue;
  }
  color: red;
}

The @media at-rule does not contribute to specificity, so when the @media condition passes, it is like:

.not-working {
  color: blue;
  color: red;
}

When there are duplicate properties in a single rule, the last declaration wins. Thus, not-working will always be red, which is standard CSS behavior.

Another way to look at it is when the CSS is flattened into non-nested syntax:

@media (min-width: 40rem) {
  .not-working {
    color: #00f;
  }
}

.not-working {
  color: red;
}

Again, we can see that the color: red rule comes after the @media query. Since media queries do not contribute to specificity, the rule that comes last wins, color: red.