Allow Container Query Classes on Container Elements

[nextweb-kim]

Feature Request: Allow Container Query Classes on Container Elements

Problem Statement

Currently, when using @tailwindcss/container-queries, container query classes (e.g., @md: my-8) cannot be applied to the same element that has the @container class. This creates a significant limitation in practical layouts, especially when managing margins and spacing.

Current Limitation

<!-- ❌ This doesn't work -->
<section class="@container my-4 @md:my-8">
  Content
</section>

Required Workaround

<!-- Current workaround - requires extra wrapper -->
<div class="@container">
  <section class="my-4 @md:my-8">
    Content
  </section>
</div>

Why This Matters

1. Margin Collapse Benefits

• CSS margin collapse is essential for clean, predictable layouts
• Sections with my-* classes naturally maintain consistent spacing
• Much more intuitive than padding-based solutions

2. Component Reusability

• Components often need to be both containers and responsive to their parent container
• Extra wrapper divs break semantic HTML structure
• Increases markup complexity unnecessarily

3. Real-world Use Cases

<!-- Common pattern that should work -->
<article class="@container my-6 @lg:my-12">
  <h2 class="@md:text-2xl @lg:text-3xl">Title</h2>
  <p class="@md:text-lg">Content that responds to article width</p>
</article>

Proposed Solution

Allow container query classes to be applied to container elements themselves, with the understanding that:

1. The element acts as a container for its children
2. The element can also respond to its own parent container (if one exists)
3. Self-referential queries would be ignored or handled gracefully

Alternative Approaches Considered

1. Wrapper-based solution: Works but adds unnecessary markup
2. Padding instead of margin: Loses margin collapse benefits
3. CSS custom properties: Too verbose for utility-first approach

Impact

This enhancement would:

• Reduce HTML markup complexity
• Maintain semantic structure
• Preserve margin collapse behavior
• Improve developer experience
• Make container queries more practical for real-world layouts

Example Use Cases

<!-- Article with responsive spacing and internal layout -->
<article class="@container my-8 @lg:my-16">
  <div class="@md:grid @md:grid-cols-2 gap-4">
    <!-- Content -->
  </div>
</article>

<!-- Card component that's both container and responsive -->
<div class="@container p-4 @md:p-6 rounded @lg:rounded-lg">
  <h3 class="@md:text-xl">Card Title</h3>
  <!-- Card content -->
</div>

Thank you for considering this enhancement. Container queries are incredibly powerful, and this change would make them much more practical for everyday use.

[wongjn]

I believe the current behaviour is a limitation in CSS, not Tailwind. I don't think you can have a container query be relative to itself as that can cause infinite loops:

<div class="@container @xs:w-0">

[nextweb-kim]

@wongjn
Thanks for the quick and clear response.
I now understand that this is a structural limitation in the CSS spec itself.
While a bit unfortunate, I do hope this will eventually be addressed — either through future CSS enhancements or Tailwind workarounds.
Appreciate the insights!