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
• What are dynamic breakpoints in Tailwind CSS?
  • Using the max-* variant
  • Using the min-* variant
• What are container queries in Tailwind CSS?
• Using multiple config files in Tailwind CSS
  • Using the @config directive

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  -->
</h1>

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  -->
</h1&gt;

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">
  <!-- ... -->
</div>

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
npm install @tailwindcss/container-queries

#yarn 
yarn add @tailwindcss/container-queries

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  plugins: [
    require('@tailwindcss/container-queries'),
    // ...
  ],
}

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">
  </div>
</div>

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">
  </div>
</div>

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;

Conclusion

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!