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!

[PixelForm]

Also expected @Utility to override exisiting classes if they already exist. To be honest this is in my oppinion the whole point of using @Utility in the first place since you're registering them to the tailwindcss process. With tailwindcss v3 you could easily override exisiting classes AFIK using presets. I've come across multiple uses for overriding that you simply cannot do in tailwindcss v4 as of right now since the css variables only cover a little of the customization possibilities. For example changing --spacing would affect the padding but no option exists for heights and widths. Ofcourse you can add many custom css variables but I'd prefer more flexibility in customizing tailwind using @Utility and perhaps more css variables for common things such as heights, widths, margins, border-widths etc. I hope this is planned, as I think it could be very helpful to people using tailwind.

[RobinMalfait]

The reason @utility extends existing utilities is because of Tailwind CSS v3 where that behavior is the same and otherwise that would be a big breaking change.

Even with presets as you mentioned, you would extend plugins, never override them: https://play.tailwindcss.com/1vGd9vx2iQ?file=config

It's true that you could override theme values via presets that way in v3:

• https://play.tailwindcss.com/NrnPfhxVdx?file=config

But that behavior also exists in v4:

• https://play.tailwindcss.com/tzzEBDlIwm?file=css

[PixelForm]

Oh I see! My bad @RobinMalfait I misunderstood, could it be possible to override existing utility classes in the future by specifying a sort of override flag to the @utility or perhaps an @override directive?