How Tailwind Handles Responsiveness
Tailwind uses breakpoint prefixes to apply styles at different screen sizes. These follow a mobile-first strategy, meaning styles apply to small screens by default and scale up as needed.
Built-in Breakpoints
Tailwind provides several standard breakpoints:
|
Prefix |
Minimum width |
|---|---|
|
sm: |
640px |
|
md: |
768px |
|
lg: |
1024px |
|
xl: |
1280px |
|
2xl: |
1536px |
You can use these prefixes before any utility class. For example:
<div class="p-4 md:p-8 lg:p-12">
<!-- Padding increases at each breakpoint -->
</div>
Example: Responsive Card Grid
Here’s how to create a responsive grid that adjusts the number of columns based on screen size:
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-level-10 p-4 rounded-md shadow-sm">Card 1</div>
<div class="bg-level-10 p-4 rounded-md shadow-sm">Card 2</div>
<div class="bg-level-10 p-4 rounded-md shadow-sm">Card 3</div>
</div>
Explanation:
- grid-cols-1: 1 column by default
- sm:grid-cols-2: 2 columns starting at 640px
- lg:grid-cols-3: 3 columns starting at 1024px
This lets you adapt layouts for mobile, tablet, and desktop with minimal code.
Example: Responsive nv-button Group
<div class="flex flex-col sm:flex-row gap-4">
<nv-button class="w-full sm:w-auto">Primary action</nv-button>
<nv-button class="w-full sm:w-auto" emphasis="medium">Secondary action</nv-button>
</div>
Explanation:
- flex-col: Stack vertically by default
- sm:flex-row: Align horizontally on small screens and up
- w-full sm:w-auto: Buttons expand full-width on mobile, shrink to content on larger screens
Tips for Building Responsive Design
- Start with mobile styles and enhance as needed using breakpoint prefixes.
- Use predefined spacing tokens (e.g., gap-4, p-6) for consistency.
- Test your layout at different screen sizes to ensure usability and design alignment.