@container-queries don't seem to work in blazor

[tecxx]

What version of Tailwind CSS are you using?
3.2.4 (latest?)

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

tried tailwindcli (doesn't find container-queries plugin), and npx (works, but with problem described below)

What version of Node.js are you using?

18.12.1x64

What browser are you using?

chrome

What operating system are you using?

win10

Reproduction URL

https://play.tailwindcss.com/Szq6nq48mD
this one works fine.

Describe your issue

i want to test the container-queries plugin in blazor. while the code on playground works (see above), it does not in blazor (do note that @ has to be escaped because it is a key symbol in razor markup)

        <div class="flex flex-wrap justify-start basis-full @@container">

          <div class="bg-blue-300 relative h-60 basis-full @@lg:basis-1/2 ">Item1</div>
          <div class="bg-emerald-300 relative basis-full @@lg:basis-1/2">Item2</div>
          <div class="h-0 basis-full"></div>
          <div class="bg-red-300 relative basis-full">Item3</div>  
          <div class="bg-red-300 relative basis-full">Item4</div> 
        </div>  

the resulting stylesheet does not contain any @container class.
if i copy the one that was generated in the playground:

.\@container {
    container-type: inline-size;
}
@container (min-width: 32rem) {
    .\@lg\:basis-1\/2 {
        flex-basis: 50%;
    }
}

into my apps stylesheet manually, all is fine.

i suspect that because we have to escape the @ symbol by doubling it @@ the parser doesn't generate the css correctly? just a guess?

edit: i am a total noob to CSS so please excuse me if i got something wrong here :)

[thecrypticace]

This is happening because your content files contain @@ (because you have to escape them). If you copy & paste that code into Tailwind Play you'll see that it's not picked up. The reason for this is Tailwind reads but does not understand your source files. I would suggest using our transformers feature to "unescape" the @s in your source code.

I think something like this would be sufficient:

module.exports = {
  content: {
    files: ['./src/**/*.razor'],
    transform: {
      // `razor` here is the file extension of your razor view files
      razor: (content) => content.replace(/@@/g, "@"),
    }
  },
  // ...
}

[tecxx]

thanks a lot. got it to work, additionally by moving "require...." to the exports.plugins section (i had it in exports.theme.plugins before, this didn't work)

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: {
        files: ["./**/*.{razor,html,cshtml}"],
        transform: {
            razor: (content) => content.replace(/@@/g, "@"),
        }
    },
    theme: {
        plugins: [
            // ...
        ]
    },
    plugins: [
	    require('@tailwindcss/container-queries'),
    ],
}

works both via npx and tailwindcli.exe
thanks again, can close question.

[JoshuaMorley]

Thank you for this solution, it almost worked for me.
I did find the issue, I needed to change the transform for my file ending.

For example I am using .cshtml so I changed it to this and it worked:

content: {
    files: ["./**/*.{razor,html,cshtml}"],
    transform: {
        cshtml: (content) => content.replace(/@@/g, "@"),
    }
},

[McGern]

The transform didn't work for me, don't know if it's tailwind 4 related or not, but this semi-solution in the comments worked for me from stack overflow

https://stackoverflow.com/questions/77237966/how-to-use-as-a-class-name-with-razor-syntax-for-tailwindcss