What is mobile-first CSS?

Mobile-first means writing base styles for small screens and using min-width queries to add complexity at larger sizes. This is more efficient than max-width queries that override styles down to mobile.

What breakpoints should I use?

Common Tailwind-inspired breakpoints are 640px (sm), 768px (md), 1024px (lg), and 1280px (xl). Match them to your design system rather than specific devices.

Can I use CSS custom properties inside media queries?

You can use custom properties inside media queries but you cannot use them in the query condition itself. For dynamic breakpoints, use container queries which support custom properties.

Format CSS Media Queries

Mobile-first media queries start with styles for small screens and layer on additional styles at wider breakpoints. This approach ensures basic usability on mobile without needing to undo styles set for desktop. The formatter aligns nested rules inside each breakpoint and makes the breakpoint progression easy to scan. Use consistent breakpoint values across your project for predictable responsive behavior.

Example

.container { width: 100%; padding: 0 1rem; }
.hero { font-size: 1.5rem; padding: 2rem 0; text-align: center; }
.grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .container { max-width: 640px; margin: 0 auto; } .hero { font-size: 2rem; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } .grid { grid-template-columns: repeat(3, 1fr); } .hero { font-size: 2.5rem; text-align: left; } }
@media print { .nav, .footer { display: none; } body { font-size: 12pt; } }

[ open in CSS Formatter → ]

FAQ

What is mobile-first CSS?: Mobile-first means writing base styles for small screens and using min-width queries to add complexity at larger sizes. This is more efficient than max-width queries that override styles down to mobile.
What breakpoints should I use?: Common Tailwind-inspired breakpoints are 640px (sm), 768px (md), 1024px (lg), and 1280px (xl). Match them to your design system rather than specific devices.
Can I use CSS custom properties inside media queries?: You can use custom properties inside media queries but you cannot use them in the query condition itself. For dynamic breakpoints, use container queries which support custom properties.

Related Examples

Format a CSS Custom Properties File

CSS custom properties (variables) defined on :root create a design token system ...

Format a CSS Reset Stylesheet

A CSS reset removes browser default styles so your own styles apply consistently...

Format an HTML CSS Grid Layout

CSS Grid enables two-dimensional layouts with clean, semantic HTML. This example...