[v4] @utility with custom layer

[diegohaz]

I'd like to define the cascade layer to add my utility. This will help me create base utilities that can be overridden by existing utility classes applied to the element. Something like this:

@layer base-utilities;
@import "tailwindcss";

@layer base-utilities {
  @utility button {
    @apply bg-black ...;
  }
}

This way, I can consistently override some of its properties using built-in Tailwind utilities in HTML:

<button class="button bg-white">

I could avoid using @utility entirely and simply define a CSS class, but then I'd miss out on the autocomplete, variants, and nice DX provided by Tailwind classes.

[adamwathan]

Hey @diegohaz good to see you! So two options here…

First, you might not actually need to worry about this at all — we sort all of your utilities intelligently based on the number of properties they use, so a class like button that has a bunch of different properties in it will already be sorted earlier in the CSS than simple single-property utilities.

In this example, button has a black background by default but is still overrideable with bg-indigo-500:

https://play.tailwindcss.com/CV7RwW9Ftu

If you really need them to be in a separate layer, another option is to nest the layer:

@utility button {
  @layer base {
    @apply bg-black …;
  }
}

This will produce CSS that ultimately is interpreted like this in the browser:

@layer utilities {
  @layer base {
    .button { ... }
  }

  .flex { ... }
  .bg-red-500 { ... }
}

Since all rules not in a layer are treated as more important than rules in a layer, using a nested layer effectively behaves the same as this for all intents and purposes:

@layer base-utilities {
  .button { ... }
}
@layer utilities {
  .flex { ... }
  .bg-red-500 { ... }
}

Let me know if that helps!

[diegohaz]

First, you might not actually need to worry about this at all — we sort all of your utilities intelligently based on the number of properties they use, so a class like button that has a bunch of different properties in it will already be sorted earlier in the CSS than simple single-property utilities.

Thanks for the reply. I wasn't aware of that. It makes a lot of sense, and I think it's all I need.

Amazing work!

[hnordt]

I really liked this pattern!