What breakpoints does Tailwind CSS use?

Tailwind's defaults are sm: 640px, md: 768px, lg: 1024px, xl: 1280px and 2xl: 1536px. These are reasonable starting points but should be validated against the project's actual content.

Can I use custom breakpoint names instead of sm/md/lg?

Yes. This tool accepts any name. Some teams prefer descriptive names like compact/regular/wide over size-based abbreviations.

How many breakpoints should a project have?

Three to five. Fewer than three often means a painful jump; more than five means the responsive logic is hard to reason about and test.

Tools — 14

A breakpoint without a reason is a breakpoint without a future.

Copying 640/768/1024/1280 from a framework default is not deciding — it is deferring. This tool lets you define each breakpoint, name it, and see what it actually does to a sample layout before it becomes a token. The result saves into the shared schema and exports as CSS or Tailwind config.

Breakpoints

Preview viewport

Viewport width1024px

Active breakpoint: lg

2xl

Export

Export format

CSSTailwind

CSS custom properties

:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

Reference

A responsive breakpoint is a viewport width at which the layout changes. Breakpoints are most useful when they are named, documented, and derived from content needs rather than copied from a framework default.

How should breakpoints be chosen?

Start from the content, not from device sizes. A breakpoint belongs where the layout breaks — where a line becomes too long, a sidebar too narrow, or a grid too crowded. Testing with real content at a slowly widening viewport reveals these points.

Device-based breakpoints (phone/tablet/desktop) fail because devices do not cluster neatly into three sizes. Content-based breakpoints survive new hardware.

Should breakpoints use px, em or rem?

em is the most robust unit for media queries because it responds to the user's browser font-size setting. A user who sets their font to 20px effectively shifts every em breakpoint, which means they get the layout that fits their actual readable line length.

px is simpler and more predictable, and is what Tailwind and most frameworks use. The practical difference is small, because few users change their default font size.

How do breakpoints relate to the token schema?

Breakpoints saved here appear in the schema alongside colour and z-index tokens. This means the same JSON or CSS export includes all three, and a change to the breakpoint set is versioned in the same file as a colour change.

Common questions

What breakpoints does Tailwind CSS use?: Tailwind's defaults are sm: 640px, md: 768px, lg: 1024px, xl: 1280px and 2xl: 1536px. These are reasonable starting points but should be validated against the project's actual content.
Can I use custom breakpoint names instead of sm/md/lg?: Yes. This tool accepts any name. Some teams prefer descriptive names like compact/regular/wide over size-based abbreviations.
How many breakpoints should a project have?: Three to five. Fewer than three often means a painful jump; more than five means the responsive logic is hard to reason about and test.