Learn Tailwind CSS - Advanced Responsive Techniques & Container Queries

#Introduction

Viewport-based media queries have a limitation: a card in the sidebar and the same card in the main content can't respond to their own size. Container queries solve this — styling reacts to the parent's size, not the screen size. Episode 16 covers container queries, fluid typography, and modern layout composition.

These techniques become important when a component is reused in very different contexts. One ProductCard component can look great in a 3-column grid and in a narrow sidebar, without writing a second component.

#Container Queries

#Install and @container

Install the official plugin:

npm install -D @tailwindcss/container-queries

Register it in the config, then mark an element as a container:

Registering the plugin

module.exports = {
  plugins: [require("@tailwindcss/container-queries")],
};

Container and responsive child

<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2">
    <div>Kartu 1</div>
    <div>Kartu 2</div>
  </div>
</div>

@md:grid-cols-2 activates when the container is at least 28rem — not when a particular viewport hits. That means the same card automatically adapts whether it sits in a sidebar or in full content.

#Container Nesting

A container follows the nearest size up the tree. For precise control, name your containers:

Named containers

<div class="@container/layout">
  <aside class="@container/sidebar">
    <div class="@sm:flex-col @lg:flex-row">Konten adaptif</div>
  </aside>
</div>

Named containers ensure a child responds to the right container — this @container/layout pattern matters when containers are nested.

#Fluid Typography with clamp()

Text that "flows" with the viewport is made with clamp():

Fluid typography

<h1 class="text-[clamp(1.5rem,4vw,3rem)] font-bold">
  Judul yang membesar mengikuti lebar layar
</h1>

clamp(1.5rem, 4vw, 3rem) means: minimum 1.5rem, preferred 4vw, maximum 3rem. On small screens the text won't shrink below the floor; on large screens it won't grow past the ceiling — without a single media query.

For breakpoint combinations, fluid typography often pairs with Tailwind's scale:

Fluid with fallback

<h1 class="text-3xl text-[clamp(1.875rem,4vw,3rem)]">
  Judul halaman
</h1>

text-3xl is a static fallback, then the text-[clamp(...)] class refines it in supporting browsers. The fallback keeps text readable on older browsers.

#State-Driven Layout Composition

Modern layouts often combine multiple sources of truth: container size, viewport, and interaction state. An example component that responds to all three:

Responsive + state composition

<article
  class="group @container p-4
         @lg:grid @lg:grid-cols-[160px_1fr]
         gap-4"
>
  <img
    class="aspect-square w-full rounded-lg
           group-hover:scale-105 transition"
    src="foto.jpg"
    alt="Contoh"
  />
  <div class="mt-4 @lg:mt-0">
    <h2 class="text-xl font-semibold">Judul</h2>
    <p class="text-sm text-gray-600">Deskripsi singkat.</p>
  </div>
</article>

The two-column grid appears when the container is wide; the image scales up slightly when the card is hovered. This combination of @container, group-hover, and transition shows the power of state-driven composition — every variant works without JavaScript.

#Conclusion

Episode 16 expanded your responsive toolkit: container queries with the @tailwindcss/container-queries plugin, fluid typography using clamp(), and layout composition driven by a combination of container, state, and breakpoints.

Key takeaways:

• Container queries make components respond to their parent's size.
• The @md: prefix activates based on container size, not viewport.
• Named containers give control when containers are nested.
• clamp(min, preferred, max) makes text flow without media queries.
• Provide a static fallback for browsers without support.
• Combine @container, group-hover, and transition for state-driven layouts.

Next, in episode 17, we'll cover accessibility & internationalization — focus rings and contrast, reduced motion support, and handling RTL and layout localization with Tailwind.