How to use breakpoints in Tailwind CSS

Responsive design is all about making your site look good everywhere. Phone, tablet, desktop – it needs to work.

The old way meant writing tons of media queries, jumping between CSS files, and hoping you didn't miss a breakpoint somewhere. Honestly, it was a pain.

Tailwind changed this completely. You just prefix a class with the screen size you want, and you're done. No more separate CSS files or hunting down media queries. Everything happens right in your HTML.

Let me show you how it works.

Mobile-first responsive design

Here's the thing about Tailwind breakpoints – they work mobile-first. That means when you add a class without a prefix, it applies to ALL screen sizes. When you add a prefix like md: or lg:, it kicks in at that size and stays active for everything larger.

This trips people up at first. You might think sm:text-center means "center text on small screens." But that's wrong. It actually means "center text starting at the small breakpoint and above."

Let me show you a better way to think about it:

```html


  



  

```

See how that works? You start with the mobile version (no prefix), then add prefixed classes for larger screens. The mobile style is your foundation, and you build up from there.

This also keeps your HTML cleaner. Instead of writing separate styles for every screen size, you only write what changes.

The five default breakpoints

Tailwind ships with five breakpoints out of the box. These cover most common device sizes you'll encounter:

Notice how they're defined in rem units instead of pixels. This helps with accessibility since rem scales with the user's font size preferences.

Here's how you'd use them to build a responsive grid that adapts at different screen sizes:

```html

  

```

The grid starts as a single column on mobile. When you hit 640px (sm), it switches to 2 columns. At 768px (md), it becomes 3 columns. Then 4 at 1024px (lg), and finally 6 columns at 1280px (xl).

You can apply these breakpoint prefixes to ANY Tailwind utility. Text size, spacing, colors, flexbox, grid – everything works with breakpoints.

Targeting breakpoint ranges

Sometimes you need to style something only at a specific screen size – not mobile, not desktop, but tablets only. Tailwind has you covered with max-width variants.

The max variants work backwards from the regular ones. Instead of "this breakpoint and up," they mean "below this breakpoint."

Here's what's available:

• @max-sm - Below 640px (mobile only)
• @max-md - Below 768px
• @max-lg - Below 1024px
• @max-xl - Below 1280px
• @max-2xl - Below 1536px

You can combine min and max variants to target specific ranges. Want to show something only on tablets? Use md:max-lg:flex:

```html


  Tablet-only content



  This only appears between md and lg

```

This is super handy when you need different layouts for different device types. Maybe your desktop has a sidebar, tablets get a simplified version, and mobile is completely different.

Just be careful not to go overboard. Usually the mobile-first approach handles most cases without needing specific ranges.

Creating custom breakpoints

The default breakpoints work great for most projects. But sometimes you need something different – maybe an extra small breakpoint for tiny phones, or a 3xl for ultra-wide monitors.

Tailwind v4 makes this simple with theme variables. You just add them to your CSS file using the @theme directive:

```css
@import "tailwindcss";
@theme {

--breakpoint-xs: 30rem;   /* 480px /

--breakpoint-3xl: 120rem; / 1920px */

}
</div>






Now you can use `xs:` and `3xl:` prefixes just like the default ones. Pretty straightforward.

You can also modify existing breakpoints. Want to change `md` from 768px to 800px? Just override it:

```css
@theme {
  --breakpoint-md: 50rem; /* 800px */
}

Or if you want to completely replace all the defaults with your own system, reset them first:
@theme {
  --breakpoint-*: initial;
  --breakpoint-mobile: 30rem;
  --breakpoint-tablet: 48rem;
  --breakpoint-desktop: 80rem;
}

One thing to keep in mind: always use the same unit for all your breakpoints. Mixing rem and px can mess up the ordering, and your breakpoints won't work as expected.
Using arbitrary breakpoint values
Sometimes you need a one-off breakpoint for a specific element. Maybe your design breaks at 900px, but you don't want to add that to your whole theme configuration.
Tailwind lets you use arbitrary values with the min and max modifiers:

```html


  Content



  Smaller text on very small screens



  Hidden only between 600px and 900px

```





This is perfect for edge cases. Your designer wants something specific at 850px? No problem. Just use min-[850px]:whatever and move on.
But don't go crazy with this. If you find yourself using the same arbitrary value multiple times, that's a sign you should add it to your theme configuration instead.
Also remember to stick with one unit. Don't mix min-[900px] and min-[50rem] in the same project – it'll cause headaches when breakpoints don't fire in the order you expect.

That's everything you need to know about breakpoints in Tailwind CSS. Start with the defaults, use the mobile-first approach, and add custom breakpoints when needed.
The beauty of Tailwind's system is that it keeps you in your HTML. No jumping between files, no hunting for the right media query. Just prefix a class and you're done.
Now go build something responsive!