Allow setting any custom utility prefix and prefix separator

[alexgrozav]

What version of Tailwind CSS are you using?

v4.0.9

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.1.0

What version of Node.js are you using?

v20.16.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

N/A

@theme inline prefix(_) {
   --spacing: 1rem;
}

Describe your issue

Some CSS writing Frameworks recommend using _ as a prefix for naming utility classes. For example, Rico Sta Cruz recommends using _className for utilities in the RSCSS framework https://rstacruz.github.io/rscss/.

Tailwind does not allow using _ as a prefix, nor does it allow using an empty string '' as a separator instead of ':'.

Expected:

• I would like to be able to use _ as a prefix
• I would like to be able to use empty string '' as a prefix separator instead of ':'

@theme inline prefix(_, false) {
   --spacing: 1rem;
}

[philipp-spiess]

Hey! This is on purpose right now so we can apply some performance optimizations when extracting the class names from your template files. Going to migrate this to a feature idea discussion though so we can still keep track of this somewhere 👍

[alexgrozav]

Thank you for clarifying and turning it into a feature idea. I'd love to be able to configure this, even if there's a performance cost associated to it. Hopefully it'll be added in the future.

[Airkro]

Tailwind 3.x supports config.separator, but it has been removed in 4.x

[27pchrisl]

The separator was needed for us when using Tailwind to generate HTML emails for Gmail. Gmail strips : but not _ from the inlined CSS block, so being able to change the separator was very handy for this use case.