Skip to content

@apply seems to be escaping underscores in class names #480

@adear11

Description

@adear11

I have a situation where I'm working on incorporating Tailwind into an existing site. Because of this I'm taking advantage of the 'prefix' field in the tailwind config.

I have found that if I use an underscore in the prefix, and then try to use @apply, I get this error when trying to build the project:

(5:3) `@apply` cannot be used with `.tw\_bg-black` because `.tw\_bg-black` either cannot be found,
or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that
`.tw\_bg-black` exists, make sure that any `@import` statements are being properly processed
*before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS
tree.`

This error seems to be caused by the @apply directive escaping the '_' in the prefix. As underscores are a valid character in a css class name, it doesn't seem to me like it should be doing this unless there is something specific to Tailwind that makes it so that underscores cannot be used in the prefix. As far as I can tell, the escaping of underscores seems to be specific to the @apply directive. The actual css generated during the build does not appear to escape them.

Not that this is hard to reproduce, but I have a repository here that demonstrates it https://github.com/adear11/tailwindcss_underscores
Simply clone, npm install, and npm run dev to see the error. Changing the underscore to a dash in tailwind-config.js and updating app.scss to use the proper prefix resolves the error.

The obvious fix for it appears to be to add '_' to the character range in src/util/escapeClassName.js, but, since I'm not overly familiar with the code base, I could be grossly oversimplifying things.

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