Make your layouts dynamic with Quantity Queries in Tailwind CSS

CSS has come a long way, giving us all sorts of cool ways to handle layouts. One neat trick that’s often overlooked is quantity queries. These let you style elements based on how many of them exist inside a container. That means you can create more flexible designs without relying on JavaScript or other external programming languages.

What Are Quantity Queries?

Quantity queries are basically CSS selectors that let you style things based on how many child elements a parent has. While CSS doesn’t have a built-in feature for this, you can get creative using the :has selector with :nth-child() and :nth-last-child() to make it work.

For example, you can style a container differently depending on how many items it holds. This is super handy for building adaptable grid layouts, menus, lists, and more.

Example 1: Changing Styles Based on the Number of Items

.container:has(:nth-child(3)) {
  background-color: lightblue;
}

Here, if a .container has at least three children, it gets a light blue background.

Example 2: Adjusting a Grid Layout Automatically

.container:has(:nth-child(5)) {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.container:has(:nth-child(3)):not(:has(:nth-child(5))) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

This setup makes a container use a 5-column grid if it has exactly 5 children. If it only has 3 (but not 5), it switches to a 3-column layout instead.

Why This Is Awesome

Quantity queries let you tweak styles without needing media queries or JavaScript. Elements adjust their look based on how many siblings they have, making things more flexible.

Quantity Queries with TailwindCSS

If you're a Tailwind CSS user, you can use the tailwindcss-quantity-queries plugin to integrate quantity queries into your workflow. This plugin allows you to apply Tailwind utility classes based on the number of child elements, making it easy to create dynamic, responsive designs without writing custom CSS. For example:

<div class="children-[>3]:bg-blue-500 children-[5]:grid-cols-5">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

With this setup, the parent div gets a blue background if it has three children and switches to a 5-column grid if it has five children. This plugin is a great way to make your Tailwind projects even more flexible and powerful.

You can also use the plugin in combination with the group utility to style the children, based on a groups number of children. For example:

<div class="group">
  <div class="group-children-[<3]:bg-red-500">Child 1</div>
  <div class="group-children-[>5]:bg-blue-500">Child 2</div>
  <div class="group-children-[2-5]:bg-green-500">Child 3</div>
</div>

The plugin is compatible with both the new v4 of Tailwind, and the old v3. You simply drop in the plugin in your config, eg. in the new css style config:

@plugin "tailwindcss-quantity-queries"

or in the old javascript format:

module.exports = {
  plugins: [
    require('tailwindcss-quantity-queries')
  ],
};

Wrapping Up

Quantity queries in CSS give you new ways to create flexible and responsive designs.

Give it a shot and see how it changes your workflow!