Breakpoints

Customizing the default breakpoints for your project.

Basic customization

You define your project’s breakpoints in the theme.screens section of your tailwind.config.js file. The keys are your screen names (used as the prefix for the responsive utility variants Tailwind generates, like md:text-center), and the values are the min-width where that breakpoint should start.

The default breakpoints are inspired by common device resolutions:

// tailwind.config.js
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) { ... }
    }
  }
}

Feel free to have as few or as many screens as you want, naming them in whatever way you’d prefer for your project.

For example, you could use device names instead of sizes:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }
      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }
      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

These screen names will be reflected in your utilities, so your text-center utilities would now look like this:

.text-center { text-align: center }
@media (min-width: 640px) {
  .tablet\:text-center { text-align: center }
}
@media (min-width: 1024px) {
  .laptop\:text-center { text-align: center }
}
@media (min-width: 1280px) {
  .desktop\:text-center { text-align: center }
}

Max-width breakpoints

If you want to work with max-width breakpoints instead of min-width, you can specify your screens as objects with a max key:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
      'md': {'max': '767px'},
      // => @media (max-width: 767px) { ... }
      'lg': {'max': '1023px'},
      // => @media (max-width: 1023px) { ... }
      'xl': {'max': '1279px'},
      // => @media (max-width: 1279px) { ... }
    }
  }
}

You can even create breakpoints with both min-width and max-width definitions if necessary, for example:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px'},
    },
  }
}

Multi-range breakpoints

Sometimes it can be useful to have a single breakpoint definition apply in multiple ranges.

For example, say you have a sidebar and want your breakpoints to be based on the content-area width rather than the entire viewport. You can simulate this having one of your breakpoints fall back to a smaller breakpoint when the sidebar becomes visible and shrinks the content area:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

Custom media queries

If you need to provide a completely custom media query for a breakpoint, you can do so using an object with a raw key:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'portrait': {'raw': '(orientation: portrait)'},
        // => @media (orientation: portrait) { ... }
      }
    }
  }
}

Styling for print

The raw option can be particularly useful if you need to apply different styles specifically for print.

All you need to do is add a print screen under theme.extend.screens:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media  print { ... }
      }
    }
  }
}

Then you can use classes like print:text-black to specify styles that should only be applied when someone tries to print the page you’re working on:

<div class="text-gray-700 print:text-black">
  <!-- ... -->
</div>