breakpoints

Breakpoints Generator

Overview

Generate consistent responsive breakpoint tokens for mobile-first or desktop-first design. Includes common device-based presets and custom configuration options.

When to Use

• Setting up responsive design tokens
• Standardizing media queries across a project
• Creating container query breakpoints
• Migrating from arbitrary breakpoints to tokens

Quick Reference: Common Breakpoints

Name	Min Width	Target Devices
xs	0	Small phones
sm	640px	Large phones, small tablets
md	768px	Tablets portrait
lg	1024px	Tablets landscape, laptops
xl	1280px	Desktops
2xl	1536px	Large desktops

The Process

1. Ask approach: Mobile-first (min-width) or desktop-first (max-width)?
2. Ask preset or custom:
   • Preset: Tailwind, Bootstrap, Material, or Custom
   • Custom: Define your own values
3. Ask steps: How many breakpoints (4-6 typical)
4. Ask container queries: Include container query tokens?
5. Ask format: CSS, Tailwind, JSON, or SCSS?
6. Generate: Create breakpoint scale with media query helpers

Breakpoint Presets

Preset	Values	Character
Tailwind	640, 768, 1024, 1280, 1536	Content-focused
Bootstrap	576, 768, 992, 1200, 1400	Traditional
Material	600, 905, 1240, 1440	Google spec
Minimal	640, 1024, 1440	Simple 3-tier

Output Formats

CSS Custom Properties + Media Queries:

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

/* Mobile-first media queries (use with @media) */
/* @media (min-width: 640px) - sm and up */
/* @media (min-width: 768px) - md and up */
/* @media (min-width: 1024px) - lg and up */
/* @media (min-width: 1280px) - xl and up */
/* @media (min-width: 1536px) - 2xl and up */

Tailwind Config:

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}