The boilerplate uses a mobile-first responsive design approach with Tailwind CSS breakpoints. All pages are tested at viewport widths down to 320px (iPhone SE/small devices).
Mobile-First
Designed for mobile devices first, enhanced for larger screens.
320px Minimum
Supports viewports as small as 320px with no horizontal scrolling.
Tailwind Breakpoints
Uses sm (640px), md (768px), lg (1024px), xl (1280px) breakpoints.
Automated Testing
Playwright responsive tests at 320px, 768px, and 1280px viewports.
Responsive Breakpoints
| Breakpoint | Width | Typical Devices |
|---|---|---|
sm |
640px+ | Large phones, small tablets |
md |
768px+ | Tablets, small laptops |
lg |
1024px+ | Laptops, desktops |
xl |
1280px+ | Large desktops |