Responsive Design

Build layouts that adapt to any screen size. Use Tailwind's breakpoint prefixes (sm:, md:, lg:, xl:) to conditionally apply styles.

Viewport Simulator

Simulated Screen Width

Simulated Viewport: 320px

Responsive Typography

(text-xl @md:text-3xl @lg:text-4xl)

/* Example of Grid changing columns based on screen size */
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4"

iMobile First Strategy

Tailwind uses a Mobile First breakpoint system. This means that unprefixed utilities (like `grid-cols-1`) apply to all screen sizes. Prefixed utilities (like `md:grid-cols-2`) only apply at that breakpoint and above.

✨ The Simulator Secret:Normally, Tailwind prefixes like `sm:` and `md:` respond to your physical browser window. To make this interactive playground work inside your current browser window, we used Tailwind Container Queries(`@container` and `@sm:`). They act exactly like normal media queries, but they measure their parent container's width instead of the entire screen!