Responsive Design

Tailwind uses a mobile-first breakpoint system. Every utility class can be applied conditionally at different breakpoints.

Breakpoints

Tailwind includes five breakpoints by default:

Prefix	Minimum width	CSS
`sm`	640px	`@media (min-width: 640px)`
`md`	768px	`@media (min-width: 768px)`
`lg`	1024px	`@media (min-width: 1024px)`
`xl`	1280px	`@media (min-width: 1280px)`
`2xl`	1536px	`@media (min-width: 1536px)`

Usage

html

<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

Mobile First

Start with mobile styles, then add responsive variants:

html

<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  Responsive text size
</div>

Hiding Elements

html

<div class="hidden md:block">
  Hidden on mobile, visible on md+
</div>

<div class="block md:hidden">
  Visible on mobile only
</div>

Grid Responsive

html

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>