Yumma CSS 3.15

Container Queries

Apply styles based on the size of a parent container.

Usage

Container queries allow you to change styles based on the size of a parent container rather than the viewport. They use the @ prefix.

<div class="@sm:w-full ...">
  Responsive based on container size
</div>

Container query breakpoints reference:

PrefixMin Width
@sm@container (width >= 40rem)
@md@container (width >= 48rem)
@lg@container (width >= 64rem)
@xl@container (width >= 80rem)
@xxl@container (width >= 96rem)

Example

Resize the container below to see how the child element responds.

I change color based on my parent container!

<div class="bg-indigo-5 @sm:bg-red-5 @md:bg-green-5">
  I change color based on my parent container!
</div>