Tailwind Flexbox & Grid Builder

Toggle layout utilities and watch the container update live. Shrink the viewport to see the responsive md: prefix kick in.

Viewport md: inactive
1
2
3
4
Container classes
Generated CSS
Mobile-first: unprefixed utilities apply at every size. A prefix like md: means "from the md breakpoint (768px) and up". You design the small screen first, then layer overrides for bigger screens.