Tailwind responsive design: breakpoints and media queries

Tailwind CSS handles responsive design with breakpoint prefixes. An unprefixed class such as flex-col applies at every size, and a prefixed class such as md:flex-row applies from the md breakpoint (48rem, 768 px) upwards. That makes Tailwind mobile first by default: you write the phone layout plainly and add prefixes for larger screens. This guide covers Tailwind v4, with notes for v3 where the syntax differs.

Default breakpoints in Tailwind CSS v4

There is no xs: prefix by default. Styles without a prefix are your smallest layout. You can confirm the values in the Tailwind responsive design docs.

How the mobile-first prefixes work

A typical card layout:

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-8">
  ...
</div>

Read it left to right: one column on phones, two columns from 640 px, three columns and larger gaps from 1024 px. A common mistake is writing sm:grid-cols-1 and expecting it to target phones. sm: means “640 px and up”, so phone styles go without a prefix.

For a stacked-to-row header:

<header class="flex flex-col items-start gap-3 md:flex-row md:items-center md:justify-between">

Targeting a range or a maximum width

Tailwind v4 includes max-* variants and lets you stack them with min-width prefixes:

• max-md:hidden hides an element below 768 px.
• md:max-lg:flex applies only from 768 px up to (not including) 1024 px.

For one-off values, use arbitrary breakpoints: min-[900px]:grid-cols-4 or max-[420px]:text-sm. Use them sparingly; if a value appears in several places, make it a named breakpoint.

Adding or changing breakpoints

In v4, breakpoints are theme variables defined in your CSS:

@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 120rem;
}

That creates xs: and 3xl: prefixes. To change an existing one, redefine it (--breakpoint-md: 50rem;). To remove a default, set it to initial.

In Tailwind v3, the same configuration lives in tailwind.config.js under theme.screens (or theme.extend.screens to keep the defaults).

Use rem values so breakpoints respect users who change their browser’s default font size. How to pick the widths themselves is covered in responsive breakpoints.

Writing media queries in your own CSS

Sometimes a component is easier to style in CSS. In v4 you can reuse Tailwind’s breakpoints there:

.prose-table {
  overflow-x: auto;

  @variant md {
    overflow-x: visible;
  }
}

@variant accepts the same variant names you use in class names, so @variant lg or @variant dark work the same way. For the general syntax of media queries, see the CSS media queries guide.

Other responsive variants worth knowing

• portrait: and landscape: for orientation.
• dark: for dark mode (based on prefers-color-scheme unless you configure a class strategy).
• motion-reduce: and motion-safe: for reduced-motion preferences.
• print: for print styles.
• hover: in v4 applies only on devices that support hover, so hover effects no longer get “stuck” after a tap on touch screens.

Container queries in Tailwind

Breakpoints respond to the viewport. Container queries respond to the width of a parent element, which suits reusable components that appear in both wide and narrow columns. In v4 they are built in:

<div class="@container">
  <article class="flex flex-col @md:flex-row">...</article>
</div>

Here @md: refers to the container’s width (28rem by default), not the screen’s. In v3 you need the official @tailwindcss/container-queries plugin.

Testing a Tailwind layout on mobile

Tailwind makes it easy to add breakpoints, and just as easy to forget to check them. While you work:

1. Keep a phone-sized view open next to your editor. Chrome DevTools device mode works; so does a one-click mobile view extension that runs on localhost and keeps a phone frame on as you move between pages.
2. In DevTools, enable Show media queries in the device toolbar to see Tailwind’s breakpoints as bars and jump to each one.
3. Test each breakpoint at its exact width and 1 px below it, for example 767 px and 768 px.

The full testing method is in how to test responsive design.

Frequently asked questions

What are the Tailwind CSS breakpoints?

By default: sm 40rem (640 px), md 48rem (768 px), lg 64rem (1024 px), xl 80rem (1280 px) and 2xl 96rem (1536 px). Each applies from that width upwards.

How do I target mobile only in Tailwind?

Write mobile styles without a prefix, then override them at larger sizes. If you need a style only below a size, use a max-* variant such as max-sm: or max-md:.

Are Tailwind media queries min-width or max-width?

Min-width. Every default breakpoint prefix applies from that width up, which is the mobile-first approach.