Building Responsive React UIs With Tailwind CSS

Building Responsive React UIs With Tailwind CSS

Responsive design is where Tailwind shines. Its breakpoint prefixes let you write responsive styles inline without media queries. Here is how to build responsive React UIs.

The Breakpoint Prefixes

Tailwind uses prefixes like sm:, md:, lg:, and xl: to apply styles at different screen sizes. For example, md:flex means apply flex from the medium breakpoint up.

Mobile-First by Default

Tailwind is mobile-first. A class without a prefix applies at all sizes. A prefixed class applies at that breakpoint and up. So write base styles first, then add larger-screen styles with prefixes.

A Responsive Grid

You can write grid-cols-1 md:grid-cols-3 to show one column on mobile and three on larger screens, all in one className. No media queries in a CSS file.

Responsive Spacing

Use prefixes for spacing too: p-4 md:p-8 gives more padding on larger screens. This keeps responsive adjustments colocated with the element.

Hiding and Showing

Use hidden md:block to hide an element on mobile and show it on larger screens, or block md:hidden for the opposite. This is common for navigation toggles.

Avoid Hardcoded Sizes

Use Tailwind's spacing scale rather than arbitrary pixel values, so your responsive adjustments stay consistent with your design tokens.

The Takeaway

Tailwind's breakpoint prefixes let you write responsive styles inline, mobile-first. Write base styles, then add sm:, md:, lg:, and xl: prefixes for larger screens, all in the className without separate media queries.