0
0
Tailwindmarkup~5 mins

Custom breakpoints in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Custom breakpoints let you control when your website changes layout on different screen sizes. This helps your site look good on phones, tablets, and desktops.

You want your site to look different on a tablet than on a phone or desktop.
You have a special device size that needs a unique layout.
You want to improve readability by changing font sizes at certain widths.
You want to show or hide parts of your page depending on screen size.
You want to create a design that fits your brand's style on all devices.
Syntax
Tailwind
module.exports = {
  theme: {
    extend: {},
    screens: {
      'sm': '480px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px'
    }
  }
}

Define custom breakpoints inside the screens object in your tailwind.config.js file.

Use the breakpoint names as prefixes in your CSS classes, like tablet:bg-blue-500.

Examples
This example creates three custom breakpoints named phone, tablet, and desktop.
Tailwind
screens: {
  'phone': '375px',
  'tablet': '640px',
  'desktop': '1024px'
}
This box changes background color depending on the screen size using the custom breakpoints.
Tailwind
<div class="phone:bg-red-500 tablet:bg-green-500 desktop:bg-blue-500">
  Responsive box
</div>
Sample Program

This page uses custom breakpoints named phone, tablet, and desktop. The box changes its background color as you resize the browser window.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Custom Breakpoints Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {},
        screens: {
          'phone': '375px',
          'tablet': '640px',
          'desktop': '1024px'
        }
      }
    }
  </script>
</head>
<body class="p-6">
  <div class="phone:bg-red-300 tablet:bg-green-300 desktop:bg-blue-300 p-6 rounded">
    Resize the browser to see background color change.
  </div>
</body>
</html>
OutputSuccess
Important Notes

After changing tailwind.config.js, restart your build process if you use one.

Use meaningful names for breakpoints that match your design needs.

Test your site on different devices or use browser DevTools to resize and check responsiveness.

Summary

Custom breakpoints let you control layout changes at screen widths you choose.

Define them in the screens section of tailwind.config.js.

Use breakpoint names as prefixes in your Tailwind CSS classes to apply styles conditionally.