1

I am having an issue with my Next.js app. I upgraded to Tailwind 4 and as I understand the docs, there should be build in support for container queries. But the following code doesn't seem to work:

<div className="grid grid-cols-7 text-center font-h3 mb-1" role="row">
  {new Array(7).fill(0).map((_, i) => (
    <div key={i} role="columnheader" className="@container">
      <span className={clsx("hidden @md:inline", small ? "lowercase text-primary-500": "@md:normal-case @md:text-black")}>
        {small ? shortWeekLabels[i] : longWeekLabels[i]}
      </span>
      <span className="@md:hidden lowercase text-primary-500">
        {shortWeekLabels[i]}
      </span>
    </div>
  ))}
</div>

If I replace the @md prefixes with their regular breakpoint counterparts, they work. But as my component is used in a dynamic layout, that makes changes less 'linear' I would prefer using container queries. What am I doing wrong?

Improve this question

2 Answers 2

Reset to default
2

Oh wow, of course I'd find the issues only minutes after posting. My mistake was not placing the "@container" class high level enough. I thought it had to be the direct parent, but it oviously has to be the outer wrapper of the component.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It can be placed anywhere. Always apply the @container to the exact element whose full width you want to be considered as 100%. Btw logically, yes - in the case of a grid, this isn't the expected usage pattern, but the logic still works here as well if the screen is wide enough: play.tailwindcss.com/hg3HHYfoLz?size=3380x720 - read more
0

It seems that the code snippet indeed "doesn't work as expected" (the response shows that it does work as expected - it's just that this wasn’t your intended goal) when used within a grid and a @container. From @md onward, the inline property doesn't override the hidden class.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-7">
  <div class="@container">
    <span class="bg-sky-500 hidden @md:inline">Label #1</span>
    <span class="bg-orange-500 @md:hidden">Label #2</span>
  </div>
</div>

However, if I remove the grid-cols-7 class, it unexpectedly works correctly:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid">
  <div class="@container">
    <span class="bg-sky-500 hidden @md:inline">Label #1</span>
    <span class="bg-orange-500 @md:hidden">Label #2</span>
  </div>
</div>

The reason is that when you place the @container inside a grid and then divide the grid's width into 7 parts, each @container only gets 1/7 of the total width, so it takes a long time to reach the @md breakpoint.

So it still works once the required width is reached - it's just that this isn't the behavior you expected, as you were assuming it would be calculated based on 100% of the grid's width.

That's exactly why, if you want the container query to use the full grid width - as you mentioned in your answer - you need to attach the @container to the grid itself.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="@container grid grid-cols-7">
  <div class="">
    <span class="bg-sky-500 hidden @md:inline">Label #1</span>
    <span class="bg-orange-500 @md:hidden">Label #2</span>
  </div>
</div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.