When overriding flex-1, two utilities are generated in the output

[rozsazoltan]

What version of Tailwind CSS are you using?

For example: v4.1.8

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

Tailwind Play

Reproduction URL

https://play.tailwindcss.com/JbMqs7VnW1?file=css

Describe your issue

@utility flex-1 {
  flex: 1 1 0px;
}

The expected result would be just one utility, the new one:

.flex-1 {
  flex: 1 1 0px;
}

But the old one is also implemented:

.flex-1 {
  flex: 1 1 0px;
}
.flex-1 {
  flex: 1;
}

If I override the entire flex-* utility, at least the specificity will be correct:

@utility flex-* {
  flex: --value(integer, [*]) 1 0px;
}

.flex-1 {
  flex: 1;
}
.flex-1 {
  flex: 1 1 0px;
}

https://play.tailwindcss.com/yPtNMkQL2r?file=css

[RobinMalfait]

Hey!

This is expected behavior right now because we don't have a concept of overriding utilities at this time. If you use @utility, then it's registered as a new utility internally, if you then use flex-1 all utilities that match will be emitted, essentially extending existing utilities.

Going to keep this open a little longer because while it's not a bug, I also don't want to forget about this. We probably want to introduce some keyword to mark the utility that it overrides instead of extends.

[WarboxLiam]

@RobinMalfait

Would also love a way to mark a @Utility as being an override rather than extending. It's kind of how I thought it would work by default to be honest, but glad that this is at least on someone's radar!