Tailwind breakpoints provide the ultimate answer to clean, easy-to-write media queries. Rather than painstakingly writing out standard media queries with CSS, you can utilize the following Tailwind class prefixes to determine on what screen size should certain Tailwind classes take effect.

For reference, the breakpoints Tailwind provides are as follows:

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

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

So for instance, if we wanted a class of hidden to only take effect on screen sizes larger than 1024px wide, we'd add on a class of lg:hidden to the element, rather than just hidden which would hide the element on all screen sizes.

These breakpoints provide an extremely quick and powerful way to get your sites looking like they should based off a design - no more tedious custom class writing, just easy breakpoint rendering using simple prefixes.