ZeroServer.tools

CSS Media Query Generator

Generate media queries for Bootstrap, Tailwind, MUI, Bulma, or custom breakpoints.

Preset

CSS selector template (use {bp} for breakpoint name)

Tailwind CSS Breakpoints

Name	Min-width
xs	All screens
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Generated CSS

/* sm: ≥640px */
@media (min-width: 640px) {
  .sm { /* styles */ }
}

/* md: ≥768px */
@media (min-width: 768px) {
  .md { /* styles */ }
}

/* lg: ≥1024px */
@media (min-width: 1024px) {
  .lg { /* styles */ }
}

/* xl: ≥1280px */
@media (min-width: 1280px) {
  .xl { /* styles */ }
}

/* 2xl: ≥1536px */
@media (min-width: 1536px) {
  .2xl { /* styles */ }
}

Mobile-first vs desktop-first media queries

Mobile-first (min-width) writes base styles for small screens and overrides for larger ones. This is the modern default — Tailwind CSS, Bootstrap 5, and MUI all use it. Desktop-first (max-width) starts from large screens and uses max-width breakpoints to narrow down. Use max-width: (breakpoint - 0.02px) to avoid overlap between adjacent breakpoints on non-fractional screens. Related: HTML boilerplate generator.

Private & free — this tool runs entirely in your browser.