Do container-queries work in Nuxt v3?

[chrisnoden]

Hi

I've followed the getting started instructions but tailwind does not appear to be compiling the @ classes in Nuxt v3. It treats them as normal classes (ignoring the @XL etc directives).

Is this a problem with the https://github.com/nuxt-community/nuxt-tailwindcss module?

Many thanks

Chris

[wongjn]

Could you elaborate more on what you mean by It treats them as normal classes (ignoring the @XL etc directives).? A remotely-hosted git repository reproducing the unexpected behavior could be useful too if it could be provided please!

[chrisnoden]

OK, I'll create a git repo
But in answer to the first question, inside a div with class of @container I have a div with class="grid grid-cols-3 @xl:grid-cols-4"
When rendered I always have 4 cols in my grid regardless of browser/container size.

[chrisnoden]

In building a minimal test case project I found that the container queries do work. I'll go back to my main project and try again. I think the confusion may be down to the container variants being quite different in size to the browser media query variants (eg xl != @xl at 100vw) - so just my naivety with a new concept.

[Raj1v]

Did you ever figure out the source of the problem? I am facing the same issue

[chrisnoden]

Hi. As per my answer, @xl is not the same as the normal media query xl. It can be quite confusing using container queries.
Instead, I've evolved to not use them at all because I found it hard to really know what sizes I was using and what the outcome would be.