Suggestion Define utility classes as @utility instead of inside @layer components

[seanogdev]

Firstly I want to say I love this, really useful to not have to define a palette myself and have a set of sensible abstracted utilities available to me!

Just upgraded to v2 and was scratching my head for the longest time why bg-blue-app was not found. And then I took a look at the config and noticed these only were defined in the components layer.

As an example, for me it makes sense especially for applying the -app utility to the body.

@import 'tailwindcss-radix-colors/dist/blue.css';
@import 'tailwindcss-radix-colors/dist/sage.css';
@import 'tailwindcss-radix-colors/dist/green.css';

@layer base {
  html {
    @apply bg-blue-app; // This utility makes the most sense when applied here
  } 

  // other base styles
}

For reference:

Hey! This is done on purpose because @layer components was used to register utilities in the components layer before and now with the v4 migration we moved all utilities into the same layer so a conversion to @Utility seems expected. Are you seeing any issues with this or were you only surprised?

tailwindlabs/tailwindcss#16434 (comment)

[mrcaidev]

Yes, I can reproduce that. bg-blue-app can't be applied inside @layer base as a component class, but can be applied as a @utility. This can also be seen from the link you attached:

This is actually a very good point. If you do not need your .btn and .prose to be used with @apply or with modifiers like hover:btn, It is probably not necessary to make these a Tailwind CSS specific thing in the first place.

... which in our case, we happen to use @apply and component classes together.

But I am unsure about the legitimacy to register bg-blue-app as a @utility, for the following reasons:

1. From the official documentation, it seems that @utility should be very atomic, introducing only one single CSS rule into the Tailwind's world. But in this plugin's case, bg-blue-app and other similar classes are composed of several utility classes and definitely NOT atomic. A similar discussion can be found in Plugin should add utilities instead of components #15.
2. Registering bg-blue-app as a utility would also make these possible: hover:bg-blue-action, active:bg-blue-ghost, which is weird because *-action, *-ghost and similar classes already imply hover and active states in them. This makes me even more suspicious of the legitimacy to do so.

[rogertinch]

I'm not sure where this ended up, but from what I understand, we can't use classes provided by the plugin (e.g., bg-blue-app) in Tailwind 4's @apply directive. Is this correct?