Make the @ prefix configurable

[skttl]

What version of @tailwindcss/container-queries are you using?

0.1.1

What version of Node.js are you using?

v18.17.1

What browser are you using?

Edge

What operating system are you using?

Windows

Reproduction repository

https://github.com/tailwindlabs/tailwindcss-container-queries

Describe your issue

When using this plugin in ASP.net razor pages (cshtml / razor), the @ sign is used to input code/variables. This makes it tricky to use as a prefix for classes.

Normally you would escape it using another @, like @@container - but then tailwind won't recognize the clase. Another way is to use @("@container") but that is annoying to write.

Would it be possible to make the prefix configurable, so we could use eg. # or $ instead?

[RobinMalfait]

Hey!

Configuring the @ is potential solution we might want to add in the future. However I saw that you already have a solution by using @@ and then replacing the @@ with just @ using a transformer. (tailwindlabs/tailwindcss#12036 (reply in thread))

We may want to make this configurable in the future if there are other use cases where we can't solve this with a transformer for example.

I'm going to close this issue for now since the content transformer seems like a good solution to me right now.

[xt0rted]

@RobinMalfait I just ran into this with razor views too, and though the content transformer works, it doesn't seem to work with class sorting so all of my @@lg:... classes get put in the middle of the class list instead of at the end.

This is my config:

{
  content: {
    files: [
      "./Pages/**/*.cshtml",
      "./Views/**/*.cshtml",
    ],
    transform: {
      cshtml: (content) => content.replaceAll("@@", "@"),
    },
  },
  ...
}