Razor pre-processing issue with @@

[senneclaeskens]

What version of Tailwind CSS are you using?

v4.0.17

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

Tailwind CLI

What version of Node.js are you using?

v22.12.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://github.com/senneclaeskens/tailwind4-repro

Tailwind play: https://play.tailwindcss.com/alK9PzyzWY

Describe your issue

As explained here: #17022 (comment)

The first element should also have a red background.

Generated html by razor:

Source code:

I'm not saying this is a tailwind issue, but in v3 we could use a content transformer in combination with this syntax in razor: @("@"). This would always render one @, which would make the CSS work correctly.

[RobinMalfait]

Hey!

The content extractor from v3, is now built-in in v4 for Razor files. Given your input file, this is what Tailwind extracts:

It looks like everything is extracted properly. The part I am confused about is, why is there @@md:bg-red-500 in the actual DOM in your browser? That feels like a bug, and shouldn't be there at all.

Note: in both Tailwind CSS v3 and v4, the content extraction allowed you to change the input file in memory such that we can extract classes better. It never changed your actual files on disk. So if you end up with @@md:bg-red-500 in the DOM itself, that's something Tailwind can't fix.

[senneclaeskens]

Hi Robin,

Yes, the extraction works fine, so there is no issue regarding that. The issue is, if we have multiple items with @@, the first one is rendered "incorrectly" in the DOM, so the CSS is not being applied.

The v3 solution was to use @("@"), which always renders one @. And customize the content extractor, to replace @("@") with @.

The DOM issue that you see above, is something which has been mentioned before: dotnet/aspnetcore#38595

In case the first character needs to be 1 @, I don't think the syntax of @@ can be used if there are multiple entries with @@ on the same line.

So again, it's not a tailwind issue, but this means we are unable to use tailwind v4 in our projects which use razor syntax.

[RobinMalfait]

Aha I see, that was the part I was missing. So what you want to write is this:

<div class="@@container">
    <p class="@("@")md:bg-red-500 @@md:border-green-500 border-8">With 2 elements</p>
</div>

<div class="my-32"></div>

<div class="@@container">
    <p class="@@md:bg-red-500">With 1 element</p>
</div>

Is that correct? Or do you have to be careful with the quotes? "@("2")…

[senneclaeskens]

That will work fine. That's the workaround which is being mentioned everywhere (it's also what we were using in v3).
It's a pity we can't use @@, since the @("@") makes the code less readable. But ok, we prefer having it work :-).

Is this something which could be added in the pre-processing? To also check for @("@")?

[RobinMalfait]

Yep that makes totally sense. Just wanted to make sure it works like how interpreted it.

Opened a PR for it #17427

[senneclaeskens]

Awesome, thanks for the swift feedback and implementation!

[RobinMalfait]

Hey!

Alright this should be fixed by #17427 and will be available in the next release.