@utility not working in Tailwindcss v4

[Ekeu]

I just migrated Tailwindcss from v3 to v4. I then tried adding some custom utility classes. For that, I created an app.utilities.css which has this content

app.utilities.css

@reference "../app/globals.css";

@utility widget-card-header {
  @apply sticky top-0 font-proxima rounded-t-lg bg-slate-950 text-white p-4!;
}

app.global.css

@import "tailwindcss";
@import url("../styles/app.utilities.css") layer(utilities);

@custom-variant dark (&:is(.dark *));

@theme {...}

@layer base {...}

When I now apply that utility class to my component, for some reason it is no applied.

<div class="font-semibold leading-none tracking-tight widget-card-title">Top Tags</div>

[RobinMalfait]

Hey!

The @reference allows you to reference your custom theme, which means that you can use features like custom @utility or @apply with @theme values defined in the referenced file.
The reference is also just that, a reference.

If you want to use custom utilities, you have to move the @utility definition to the referenced file. In your case, move it to the app/globals.css file.

That said you are defining widget-card-header and using widget-card-title

- widget-card-header
+ widget-card-title

[Ekeu]

Hey @RobinMalfait

Thanks for the answer 🤝, and yeah sorry I copied the wrong html element.