Tailwind Responsive Prefixes to CSS Media Queries

Tailwind Responsive Breakpoints in CSS

Tailwind uses a mobile-first approach where unprefixed classes apply to all screen sizes, and responsive prefixes add styles at progressively wider breakpoints.

Breakpoint Scale

/* sm: */  @media (min-width: 640px)  { ... }
/* md: */  @media (min-width: 768px)  { ... }
/* lg: */  @media (min-width: 1024px) { ... }
/* xl: */  @media (min-width: 1280px) { ... }
/* 2xl: */ @media (min-width: 1536px) { ... }

Mobile-First Logic

When you write text-sm md:text-base lg:text-lg, the CSS equivalent is:

.element {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  .element {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .element {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

Common Responsive Patterns

Stack to horizontal layout: flex flex-col md:flex-row

.element { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .element { flex-direction: row; }
}

Show/hide elements: hidden md:block

.element { display: none; }
@media (min-width: 768px) {
  .element { display: block; }
}

Responsive grid columns: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4

.element {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .element {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .element {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

Design Tip

Tailwind's breakpoints match common device categories: sm for large phones, md for tablets, lg for laptops, xl for desktops, and 2xl for large monitors.