consolelog.tools

Breakpoint Generator

Define a responsive breakpoint system once - start from a Tailwind, Bootstrap, Material, or Foundation preset, edit the named min-widths, switch between px, em, and rem - then export it everywhere: CSS variables, an SCSS map with media mixins, a JS object, Tailwind v3 screens config, Tailwind v4 @theme tokens, JSON, or plain media-query snippets. A live ruler shows the scale and everything is captured in the URL.

About this ToolHow it works, benefits & use cases

Define a responsive breakpoint system once and export it everywhere your stack needs it. Start from a framework preset - Tailwind CSS, Bootstrap, Material Design, or Foundation - to load its named min-width breakpoints, then edit any name or value, add new breakpoints, or remove ones you do not need. Switch the whole scale between pixels, em, and rem (em and rem are derived from a 16px base), and watch a live ruler scale each breakpoint along a shared axis. Export the same system as CSS custom properties with container media queries, an SCSS map plus a reusable breakpoint() mixin, a JavaScript object with matching media query strings, a Tailwind v3 screens config, Tailwind v4 @theme tokens, JSON, or plain media-query snippets. A responsive grid scaffold is generated alongside, and everything regenerates live as you edit. Your whole system is captured in the URL so you can share an exact reproduction.

How to Use

  1. 1Pick a Preset - Tailwind, Bootstrap, Material Design, or Foundation - to load that framework's named breakpoints.
  2. 2Edit any breakpoint name or min-width, add new breakpoints, or remove ones you do not need.
  3. 3Choose a Unit: Pixels, Em, or Rem (em and rem are computed from a 16px base).
  4. 4Select an Export Format: CSS variables, SCSS map + mixins, JS object, Tailwind v3 config, Tailwind v4 @theme, JSON, or media-query snippets.
  5. 5Copy, download, or share the Generated Code, and reuse the responsive grid scaffold if you need one.

Key Benefits

  • Four presets - Tailwind, Bootstrap, Material Design, and Foundation - with their real named breakpoints
  • Fully editable: rename, retune, add, and remove breakpoints to define a custom system
  • Seven export targets, including both Tailwind v4 (@theme) and Tailwind v3 (screens config)
  • Switch the whole scale between px, em, and rem (em/rem from a 16px base)
  • A live ruler scales every breakpoint along a shared axis so you can see the spacing
  • A responsive grid scaffold is generated alongside the breakpoints
  • The entire system is captured in the URL for instant sharing; nothing is uploaded

Common Use Cases

  • Standing up a new design system's breakpoint tokens from a familiar framework baseline
  • Migrating a project to Tailwind v4 by exporting @theme --breakpoint tokens from existing values
  • Generating CSS custom properties and matching media queries to reference across a stylesheet
  • Producing an SCSS $breakpoints map and breakpoint() mixin for a Sass project
  • Comparing Tailwind, Bootstrap, Material, and Foundation breakpoint scales before choosing one
Breakpoint ruler
sm
640px
md
768px
lg
1024px
xl
1280px
2xl
1536px

Copy, download, share, or pipe to another tool

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

/* sm: 640px+ */
@media (min-width: 640px) {
  .container-sm {
    max-width: 640px;
  }
}

/* md: 768px+ */
@media (min-width: 768px) {
  .container-md {
    max-width: 768px;
  }
}

/* lg: 1024px+ */
@media (min-width: 1024px) {
  .container-lg {
    max-width: 1024px;
  }
}

/* xl: 1280px+ */
@media (min-width: 1280px) {
  .container-xl {
    max-width: 1280px;
  }
}

/* 2xl: 1536px+ */
@media (min-width: 1536px) {
  .container-2xl {
    max-width: 1536px;
  }
}

Breakpoints

px
px
px
px
px
Presets:

Responsive grid scaffold

A ready-to-use container + grid that adopts your breakpoints, columns, and gutters.

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding-left: 24px;
    padding-right: 24px;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
    padding-left: 32px;
    padding-right: 32px;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
    padding-left: 32px;
    padding-right: 32px;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 32px;
  }
}

One system, every format

Define your breakpoints once and emit them as CSS --breakpoint-* variables, an SCSS map with a breakpoint() mixin, a JS object, a Tailwind v3 screens config, Tailwind v4 @theme tokens, JSON, or plain media-query snippets. The numbers stay identical across formats.

Tailwind v4 and v3, both ready

Tailwind v4 reads breakpoints from CSS via @theme, while v3 uses a JavaScript config. Pick whichever your project targets - or grab a framework-neutral export to feed a design-token pipeline.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools