Tailwind CSS: Using Dynamic Breakpoints and Container Queries

Introduction

1. Breakpoints

• What are dynamic breakpoints and Container Queries?
• Dynamic Breakpoints in Tailwind CSS
• Default Tailwind CSS breakpoints
• Customizing breakpoints in tailwind.config.js
• Example of Breakpoint: Responsive Navbar with tailwind
• Example 2 of Breakpoint: Responsive Grid Layout with tailwind

1. Container Queries

• What are Container Queries?
• Container vs Media Queries: A comparison
• Container Queries in Tailwind CSS
• Using Container Queries with PostCSS plugins
• Configuring tailwind.config.js for container queries

1. Combining Dynamic Breakpoints and Container Queries

• Use-cases for combining dynamic breakpoints and container queries
• Example: Responsive dashboard layout with tailwind CSS

1. Best Practices

• How to use dynamic breakpoints and container queries
• How to avoid common mistakes

1. Conclusion

• Thank you for reading the article

In this article we are going to learn about dynamic breakpoints and Container queries in tailwind CSS

What are dynamic breakpoints and Container Queries?

To accommodate different screen sizes and resolutions, there are points in a website's layout where design changes can occur.

Basically, Breakpoints adjust the styling of the webpage or the HTML elements on the webpage based on the width of the viewport.

Thus enabling responsive design and allowing the website to adapt to different screen sizes

Example:

/*Dynamic breakpoints using media queries */

@media (max-width: 768px) {
  .element {
    /* styles for screen sizes smaller than 768px */
  }
}

Container Queries

Rather than using the entire viewport to adjust the styles of HTML on the webpage.

We can use the size of the element's container (the container inside which that particular element is present)

This allows for a lot modular approach and flexible components. That can be reused in other elements as well

Example:

/* container queries are not supported widely across browsers */

.element:container(max-width: 300px) {
  /* here you can write styles for container that has a max width of  300px */
}

Dynamic Breakpoints in Tailwind CSS

Tailwind is a framework that has revolutionized the Front-end development.

There are a set of pre defined breakpoints in tailwind CSS that you can use out of the box to create responsive designs

<!-- Tailwind CSS breakpoints Example -->
<div class="bg-blue-200 md:bg-gray-200 lg:bg-indigo-500">
    The div is going to change the background color based on the size of the viewport
</div>

Default Tailwind CSS breakpoints

Tailwind CSS provides the following default breakpoints

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

This is how you can use the breakpoints in your HTML

<!--default breakpoints example -->
<div class="text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl">
  Here we are changing the font size of the text based on the view port size
</div>

Customizing breakpoints in tailwind.config.js

• To customize the breakpoints we need to edit or create the tailwind.config.js file in our project's root folder
• Find the theme Object in the cinfig file and add or edit the screens property inside the theme Object. Here you can define custom screen breakpoints or edit the existing breakpoints to custom sizes
• Let us consider an example below where we are adding two new breakpoints namely 3xl and 4xl

//file tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
        '4xl': '2560px',
      },
    },
  },
  variants: {},
  plugins: [],
}

Real life examples of dynamic breakpoints

Example 1: Create a Responsive Nav bar

<script src="https://cdn.tailwindcss.com"></script>

<!-- Responsive Nav bar demo using Tailwind CSS -->
<nav class="bg-gray-500 p-4">
  <div class="container mx-auto">
    <div class="flex justify-between items-center">
      <div class="text-white font-bold text-lg">
        Your Brand Name here
      </div>
      <div class="hidden md:flex">
        <a href="#" class="text-white mx-2">Services</a>
        <a href="#" class="text-white mx-2">Products</a>
        <a href="#" class="text-white mx-2">Blog</a>
      </div>
      <button class="md:hidden text-white">
        <!-- hamburger icon here -->
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="24" height="24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
</nav>

In the above example the navigation screens are hidden on small screens and shown on md to larger screens

Example 2: Responsive Grid Layout

• The Grid layout will adopt a different size according to the viewport size
• We are doing this by implementing CSS Grid in Tailwind with classes such as `md:grid-col-2 only 2 grid column in medium sized viewport and lg:grid-col-3 3 grid columns in large sized viewport.

`html

Service A
Service B
Service C
Service D
Service E

`

To read the complete article please go here:

Tailwind CSS: Using Dynamic Breakpoints and Container Queries

Comments

[alakkadshaw]

Thank you for reading. I hope you liked the article