Cannot override tailwind utilities.

[acalvino4]

What version of Tailwind CSS are you using?

v4.0.9

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

N/A - tw play

What version of Node.js are you using?

N/A - tw play

What browser are you using?

Brave

What operating system are you using?

MacOS

Reproduction URL

https://play.tailwindcss.com/4Nn2WwpPU3?file=css

Describe your issue

When I try to override a base tailwind class...

@import "tailwindcss";

@utility w-10 {
  width: 100px;
}

...it does not have any effect because in the output css, tailwind's generated utility comes later:

.w-10 {
  width: 100px;
}
.w-10 {
  width: calc(var(--spacing) * 10);
}

I would expect that any utility declarations I put after @import tailwindcss would override it.

Additionally, though it probably makes sense to list both of these in the output css file in dev, the production build should have this reduced to a single width declaration: .w-10{width:100px} (this works on the lightning css playground, hence my assumption). Instead I'm getting .w-10{width:100px;width:calc(var(--spacing)*10)}.

[philipp-spiess]

Yeah we had to make @utility add on top of the core utility for backward compatibility reasons. We've been thinking of ways to change that but that would probably mean some kind of new feature, so not something that we would classify as a GitHub issue unfortunately (hence I tried to migrate this issue to a discussion but GitHub won't let me right now...).

Can you elaborate what you mean with the lightning css playground? For me it's keeping both width values.