Container media queries are now widely supported. If you're not familiar with them, they allow you to apply styles based on the size of the parent container instead of the viewport. This is especially important when building reusable components that rarely depend on the viewport size but instead on some parent container, like a modal or card.

How container queries work

To specify a reference container you can use the container-type property in CSS. Then children can use the @container media query to apply styles based on the container size. That looks like this:

<div className="resize-container">
  <div className="my-component">
    <!-- content here -->
  </div>
</div>

.resize-container {
  container-type: inline-size;
}

.my-component {
  @container (min-width: 800px) {
    // styles here
  }
}

A simple use case could be to size text more responsively based on the parent container.

Or a profile icon component.

Use with Tailwind CSS

Tailwind doesn't natively support container media queries at the time of writing, but there are plugins that can help. One such plugin is tailwindcss-container-queries.

To use it, first install the plugin:

#### bun
bun add @tailwindcss/container-queries

#### yarn
yarn add @tailwindcss/container-queries

#### npm
npm install @tailwindcss/container-queries

Then add it to your Tailwind config:

/* tailwind.config.js */

module.exports = {
  // ...

  plugins: [require("@tailwindcss/container-queries")],
};

Now you can use container media queries in your Tailwind CSS. First, add the @container class to the container you want to use as the reference. Then for any children you want to style, instead of using the normal media queries like md:text-lg, you can use @md:text-lg to apply styles based on the container size.

<div class="@container">
  <p class="text-xs @[16rem]:text-sm @sm:text-base">...</p>
</div>

You can also name containers for more specific targeting:

<div class="@container/main">
  <div class="@lg/main:underline">...</div>
</div>

Full Example

For more context, here's the profile icon example build using Tailwind CSS from above.

<div className="@container flex items-center gap-3">
  <div className="@[16.5rem]:h-12 @[16.5rem]:w-12 border-mono-4 bg-mono-4 relative h-10 w-10 shrink-0 overflow-hidden rounded-full border">
    <Image
      src="/profile.jpeg"
      alt="Profile picture"
      layout="fill"
      sizes="100px"
    />
  </div>
  <div className="flex w-full items-center justify-between gap-6">
    <div className="flex flex-col">
      <p className="text-pretty text-base font-bold !leading-[1.2]">
        Sean Grindal
      </p>
      <p className="@[16.5rem]:block text-mono-2 hidden text-xs leading-[1.1]">
        Software Engineer at Company
      </p>
    </div>

    <div className="@[20.5rem]:block hidden pr-4">
      <a target="_blank" href={`https://x.com/seangrindal`}>
        <Icon icon="x-social" height={16} />
      </a>
    </div>
  </div>
</div>

That's all you'll need for basic usage. If you want to learn more about this plugin, you can read through the tailwindcss-container-queries documentation. If you want to learn more about container queries in general, you can read through the CSS Container Queries page on MDN.

---

Thanks for reading and I hope you learned something useful. If you want to chat with me further, you can connect with me on X.