Optional target layer for @utility directive

[senthil10]

Recently started using Tailwind (v4.1.11 standalone), I am really liking it. I am here with a question/small feature request.

Currently when we define a custom style (utility) with the @utility directive, it would end up in the @layer utilities { .... } in the generated output css file.

For example,

@utility my-btn {
    background-color: green;
}

and if my-btn is used by any element, the generated output css file will contain

@layer utilities {
    ......

    .my-btn {
        background-color: green;
    }

    ......
}

NOTE: The above example is just to elaborate :)

Request: It would be nice if there is a way to specify a target layer where the generated class would put in the output css.

Why ? - When input css gets big with lots of styling, etc, it would be helpful to abstract the styling in layers. And since, browser developer tools lists the layer name for any styling it belongs to, it would be very helpful in debugging.

Why not define the styling directly in a layer using @layer ? Because the defined class would end up in the generated output css file irrespective of whether it is used by any element or not.

Summary: It makes sense for a @utility directive to add stuff in utility layer, but basically what I wish for is a directive (with the functionality of @utility) to define custom styling, with a way to specify an optional target layer 🙂

P.S: I tried to nest the @utility within a @layer and tailwind complained utility directive can't be nested. Also I don't wanna create a @layer within the @utility { ... } as it would create nested layers.