Tailwind CSS Responsive Design
Tailwind CSS makes it easy to build responsive interfaces by providing responsive variants for almost every utility class.
Instead of writing complex media queries in your CSS, you can apply styles conditionally at different breakpoints directly in your HTML.
Mobile-First Approach
Tailwind uses a mobile-first responsive system, similar to frameworks like Bootstrap. This means that un-prefixed utilities (like text-center) apply to all screen sizes, while prefixed utilities (like md:text-left) only apply at the specified breakpoint and above.
Default Breakpoints
Tailwind provides five default breakpoints based on common device resolutions:
| Breakpoint 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) { ... } |
To use these, simply prefix any utility with the breakpoint name, followed by a colon:
Example
In this example, we have a card that stacks vertically on small screens and switches to a horizontal layout on medium screens (md: breakpoint) using Flexbox. We also use responsive utilities to adjust the image sizing and text alignment.
In the next page, we'll look at how to implement Dark Mode using a similar variant-based approach.