How to Use Tailwind CSS Responsive Breakpoints

In this section, we'll explore responsive breakpoints in Tailwind CSS. We'll delve into customizing default breakpoints, adding and adjusting fixed range minimum and maximum breakpoints, and even renaming them to fit your needs.

Tailwind CSS provides a straightforward way to work with responsive breakpoints using utility classes. These breakpoints allow you to design your web application or website to adapt to different screen sizes. Tailwind CSS defines five default breakpoints for various screen sizes.

sm: Small screens (e.g., smartphones)

md: Medium screens (e.g., tablets)

lg: Large screens (e.g., laptops)

xl: Extra-large screens (e.g., desktops)

2xl: Extra-extra-large screens (e.g., larger desktops)

These default breakpoints are influenced by typical device screen resolutions:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      '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) { ... }
    }
  }
}

Example 1

The text size increases as the screen size gets larger. It starts at the base size and progressively gets larger at each breakpoint.

<p class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl">
 This text size increases with screen size.
</p>

responsive breakpoints

Example 2

The element has different margins (m) and padding (p) at various breakpoints. The margins and padding increase as the screen size gets larger.

<div class="m-2 sm:m-4 md:m-6 lg:m-8 xl:m-10 2xl:m-12 p-4 sm:p-8 md:p-12 lg:p-16 xl:p-20 2xl:p-24">
 This element has different margins and padding at different breakpoints.
</div>

Example 3

The element is hidden on medium-sized screens (md) but is displayed on small (sm), large (lg), extra-large (xl), and extra-extra-large (2xl) screens.

<div class="hidden sm:block md:hidden lg:block xl:hidden 2xl:block">
 This element is hidden on medium-sized screens.
</div>

How to Customizing Default Breakpoints in Tailwind CSS

To override the default breakpoints in Tailwind CSS, you need to customize your Tailwind CSS configuration file (tailwind.config.js) to define your own breakpoints in the theme section. Here's how you can do it.

tailwind.config.js

module.exports = {
 theme: {
  extend: {
   screens: {
    'sm': '480px',   // Small screens
    'md': '768px',   // Medium screens
    'lg': '1024px',   // Large screens
    'xl': '1280px',   // Extra-large screens
    '2xl': '1600px',  // Extra-extra-large screens
    '3xl': '1920px',  // Custom breakpoint
   },
  },
 },
 // ...
};

Now, you can use your custom breakpoints just like you would with the default ones.

<div class="bg-blue-500 sm:bg-green-500 md:bg-red-500 lg:bg-yellow-500 xl:bg-pink-500 2xl:bg-purple-500 3xl:bg-orange-500">
 This background color will change based on the custom screen sizes.
</div>

Customizing Breakpoints Screen Names in Tailwind CSS

Feel free to choose your own names for custom screens. Tailwind doesn't limit you to the default sm/md/lg/xl/2xl convention.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

How to Fixed-range breakpoints

To set breakpoints for both minimum and maximum widths, combine the 'min' and 'max' keys.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'md': {'min': '768px', 'max': '1023px'},
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      'lg': {'min': '1024px', 'max': '1279px'},
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      'xl': {'min': '1280px', 'max': '1535px'},
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

      '2xl': {'min': '1536px'},
      // => @media (min-width: 1536px) { ... }
    },
  }
}

Custom Media Queries

If you want full control over the generated media query, use the raw key,

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}