Hamsa Harcourt I'm Hamsa, a software engineer with a strong passion for building human-centric products. I love teaching concepts about JavaScript and the web at large.

Tailwind CSS: Using dynamic breakpoints and container queries

4 min read 1358 104

Tailwind CSS: Using Dynamic Breakpoints and Container Queries

Editor’s note: This article was last updated on 20 July 2023 to include additional information about container queries and utility classes in Tailwind CSS.

Styling is a crucial component of web design, impacting how your website looks and feels to users. The right styling can improve your website’s visual appeal, usability, and professional appearance. It can also support the establishment of your website’s general tone and branding.

Aside from just aesthetics, styling can have practical advantages. For example, users will find it simpler to consume content on your website if you use the right font sizes and styles to improve legibility.

Creating these styles from scratch can be time-consuming, however, requiring thorough planning. Instead of starting every project from scratch, developers will often use prebuilt libraries that make styling webpages simpler and more standards-compliant.

These preplanned libraries are known as CSS frameworks, one of which is Tailwind CSS. In this tutorial, we’ll explore using dynamic breakpoints, multi-configs, and container queries with Tailwind CSS. Let’s get started!

Jump ahead:

Background: Introduction to Tailwind CSS

Tailwind CSS is a utility-first CSS framework for quickly creating custom user interfaces. Simple to use and highly customizable, Tailwind CSS provides a low-level styling solution that allows developers to easily create custom designs from scratch without having to write excess CSS.

As one of its main advantages, Tailwind CSS offers a large set of utility classes that you can use to style HTML elements. Simple to use, these classes are easy to combine in a variety of ways to achieve the desired styling for a specific element.

Despite being relatively new, Tailwind CSS has gained a lot of popularity among developers for its small size, simplicity, flexibility, and ease of use.

What are dynamic breakpoints in Tailwind CSS?

In CSS, dynamic breakpoints refer to arbitrary viewport sizes that allow a webpage to adjust its layout. Dynamic breakpoints are useful for creating responsive designs that look and function well on a variety of devices and screen sizes.

In Tailwind CSS v3.2, there are two ways to create dynamic breakpoints, the max-* variant and the min-* variant.

Using the max-* variant

The new max-* variant lets you apply max-width media queries based on your configured breakpoints:

<h1 class="text-black max-lg:text-red-600">
  <!-- Applies`text-red-600` when screenwidth is <= 1023px  -->

With the code above, our heading text will turn red whenever the screen width is within the range of 0 to 1023px.

Using the min-* variant

Unlike the max-* variant, the min-* variant lets you apply min-width media queries based on arbitrary values:

<h1 class="text-black min-[712px]:text-red-600">
  <!-- Applies`text-red-600` when screenwidth is >=712px  -->

To ensure that all these dynamic breakpoints give you the expected behavior in the browser, add a screens object in your configuration file as follows:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",

The Tailwind CSS v3.2.4 documentation recommends using the min-width breakpoint.

By default, using rules like md:flex will only apply when the screen size has a minimum width of 768px. You can target a breakpoint range by stacking a responsive modifier like md with a max-* modifier to confine that style to a breakpoint range as follows:

<div class="md:max-xl:flex">
  <!-- ... -->

Tailwind generates a corresponding max-* modifier for each breakpoint, so the table below lists the modifiers available at the time of writing:

Modifier Media query
max-sm @media not all and (min-width: 640px) { ... }
max-md @media not all and (min-width: 768px) { ... }
max-lg @media not all and (min-width: 1024px) { ... }
max-xl @media not all and (min-width: 1280px) { ... }
max-2xl @media not all and (min-width: 1536px) { ... }

What are container queries in Tailwind CSS?

In Tailwind CSS, a container is a component that fixes the width of an element to the current breakpoint. It utilizes a container class that sets the element’s max-width to match the min-width of the current breakpoint. It is useful when designing for a fixed set of screen sizes rather than attempting to accommodate a fully fluid viewport.

By default, Tailwind ships with five breakpoints that are inspired by common device resolutions:

Breakpoint prefix Minimum width CSS
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

CSS container queries allow you to apply styles to an element based on the size of its parent container rather than the viewport size. Tailwind CSS v3.2.4 released a @tailwindcss/container-queries plugin, which adds container query support to the framework using a new @ syntax to differentiate them from normal media queries.

To get started, install the plugin by running the following command:

npm install @tailwindcss/container-queries

yarn add @tailwindcss/container-queries

Then, add the plugin to your tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    // ...

Next, we mark an element as a container using the @container class and apply styles based on the size of that container using the container variants:

<div class="@container">
  <div class="... block @lg:flex">

In the code above, we change the display of the div to flex whenever the container is larger than 32rem. Tailwind CSS includes the following set of inbuilt container sizes:

Name Value
xs 20rem
sm 24rem
md 28rem
lg 32rem
xl 36rem
2xl 42rem
3xl 48rem
4xl 56rem
5xl 64rem
6xl 72rem
7xl 80rem

However, you can configure which values are available by adding a containers object in your config file, like so:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      containers: {
        2xs: '16rem',
        // etc...

In addition to using one of the container sizes provided by default, you can also use any arbitrary value of your choice:

<div class="@container">
  <div class="... block @[16rem]:flex">

Using multiple config files in Tailwind CSS

Tailwind CSS was designed from the ground up with customization in mind. With its config files, it’s easy to make these configurations better suit our use case. We may want to have different config files for different parts of our applications; a typical example is using one config file for the customer-facing part of your application and another config for the admin part of your application.

Before Tailwind v3.2.4, developers had different workarounds to use multiple config files in Tailwind CSS. Some versions of these workarounds involved using presets and extend options. However, these workarounds don’t solve the problem because they combine multiple configs into one and generate a CSS file, thereby defeating the purpose of having multiple stylesheets.

Using the @config directive

Tailwind CSS v3.2.4 includes a new @config directive that lets you specify which Tailwind config to use for that file.

Let’s assume we have a Tailwind CSS config file called tailwind.dashboard.config.js and a CSS file in which we’ll want to use the config file. We can specify what config file to use in our CSS file as follows:

@config "./tailwind.dashboard.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;


Dynamic breakpoints, multi-configs, and container queries are powerful Tailwind CSS features that can significantly improve the flexibility and maintainability of your design system.

With dynamic breakpoints, you can easily create responsive designs that adapt to different screen sizes and devices. Multi-configs enable you to modularize and reuse configurations across projects, and container queries allow you to apply styles based on the dimensions of a container element rather than the viewport size.

By combining these features, you can create more robust and flexible styles that can handle a wider range of devices and screen sizes. I hope you enjoyed this article. Be sure to leave a comment if you have any questions!

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.LogRocket Dashboard Free Trial Bannerhttps://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.

Hamsa Harcourt I'm Hamsa, a software engineer with a strong passion for building human-centric products. I love teaching concepts about JavaScript and the web at large.

One Reply to “Tailwind CSS: Using dynamic breakpoints and container queries”

Leave a Reply