# Mobile-First Responsive

**MUST** · **ID:** `design-mobile-first` · **Category:** design
**Source:** [Tailwind](https://tailwindcss.com/docs)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-mobile-first

> MUST: Write mobile styles first; use sm:/md:/lg: to enhance for larger screens (min-width based)

Start with mobile styles, add breakpoints for larger screens

Tailwind breakpoints are mobile-first (min-width). md:flex means "flex at medium screens AND UP." Starting desktop-first leads to verbose code with unnecessary overrides.

## Bad — do not do this

`design-mobile-first-bad`

```tsx
export function MobileFirstBad() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Desktop-First Layout</h4>
        <div className="flex flex-row sm:flex-col gap-4">
          <div className="flex-1 p-4 bg-primary/10 rounded-lg text-center">
            <span className="text-sm font-medium">Card 1</span>
          </div>
          <div className="flex-1 p-4 bg-primary/10 rounded-lg text-center">
            <span className="text-sm font-medium">Card 2</span>
          </div>
        </div>
        <div className="mt-4 bg-muted rounded p-3 font-mono text-xs">
          <code className="text-error">flex flex-row sm:flex-col</code>
        </div>
      </div>
      <div className="text-sm text-muted-foreground space-y-1">
        <p><strong>Base:</strong> Side by side (fights mobile)</p>
        <p><strong>sm+:</strong> Stacked (override needed)</p>
      </div>
      <p className="text-xs text-error">
        Desktop-first requires overrides at every breakpoint
      </p>
    </div>
  );
}
```

## Good — do this

`design-mobile-first-good`

```tsx
export function MobileFirstGood() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div className="bg-card border border-border rounded-lg p-4">
        <h4 className="font-medium mb-3">Mobile-First Layout</h4>
        <div className="flex flex-col md:flex-row gap-4">
          <div className="flex-1 p-4 bg-primary/10 rounded-lg text-center">
            <span className="text-sm font-medium">Card 1</span>
          </div>
          <div className="flex-1 p-4 bg-primary/10 rounded-lg text-center">
            <span className="text-sm font-medium">Card 2</span>
          </div>
        </div>
        <div className="mt-4 bg-muted rounded p-3 font-mono text-xs">
          <code>flex flex-col md:flex-row</code>
        </div>
      </div>
      <div className="text-sm text-muted-foreground space-y-1">
        <p><strong>Mobile:</strong> Stacked (flex-col)</p>
        <p><strong>md+:</strong> Side by side (flex-row)</p>
      </div>
      <p className="text-xs text-success">
        Base styles for mobile, breakpoints enhance for larger screens
      </p>
    </div>
  );
}
```

## References

- [Responsive Design](https://tailwindcss.com/docs/responsive-design)
- [Mobile First](https://tailwindcss.com/docs/responsive-design#mobile-first)