Skip to content

@utility doesn't allow for escaped utility names #19607

@mpeg

Description

@mpeg

What version of Tailwind CSS are you using?

v4.1.18

Reproduction URL

https://play.tailwindcss.com/LrHsRLSUuF?file=css

Describe your issue

The @utility function allows you to create utilities with special characters in them like a forward slash and it will automatically escape them (@utility my/utility { ... } -> .my\/utility { ... })

However, if you pass it an already escaped utility name, it will throw an error:

`@utility my\/utility` defines an invalid utility name. Utilities should be alphanumeric and start with a lowercase letter.

This is a problem as some linters like biome will correctly fail to parse the unescaped forward slash version, as it's not valid css: https://biomejs.dev/playground/?code=QAB1AHQAaQBsAGkAdAB5ACAAbQB5AC8AdQB0AGkAbABpAHQAeQAgAHsACgAgACAAYwBvAGwAbwByADoAIAByAGUAZAA7AAoAfQA%3D&language=css

Best solution would probably be to relax the naming rules around utilities and ensure if the special characters are already escaped, they don't get escaped again

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions