Small Breakpoint sm:

Apply styles at the small breakpoint (640px and above) for tablet and desktop layouts.

Quick Reference

Breakpoint Details

Min-width:640px
CSS:@media (min-width: 640px)
Target devices:Tablets, small laptops

Usage Examples

sm:text-lgsm:grid-cols-2sm:px-6sm:hidden

Interactive Examples

Responsive Grid Layout

Card 1

Single column on mobile, 2 columns on sm+

Card 2

Responsive grid using sm:grid-cols-2

Card 3

Automatically wraps to new row

Card 4

Clean 2-column layout on tablets

✓ 1 column on mobile (< 640px)

✓ 2 columns on sm and above (≥ 640px)

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <div>Card 1</div>
  <div>Card 2</div>
</div>

Responsive Typography

Responsive Heading

This paragraph text scales up from small to base size at the sm breakpoint. The heading grows from 2xl to 4xl, creating better hierarchy on larger screens.

This info box also scales its text size responsively.

✓ Smaller text on mobile for readability

✓ Larger text on tablets for better visual hierarchy

<h1 class="text-2xl sm:text-4xl">Heading</h1>
<p class="text-sm sm:text-base">Paragraph</p>

Responsive Spacing

Content Box

Padding increases from 16px to 32px at sm breakpoint

✓ Compact spacing on mobile (p-4 = 16px)

✓ Generous spacing on tablets (sm:p-8 = 32px)

Responsive Visibility

📱 Mobile Only Content

Hidden on sm and above

🌐 Always Visible

Shown on all screen sizes

✓ Use sm:hidden to hide on tablets+

✓ Use hidden sm:block to show only on tablets+

<div class="sm:hidden">Mobile only</div>
<div class="hidden sm:block">Tablet+</div>

Common SM Breakpoint Use Cases

📱➡️💻 Layout Transitions

Transform single-column mobile layouts to multi-column tablet layouts.

grid-cols-1 sm:grid-cols-2

📝 Typography Scaling

Increase text sizes for better readability on larger screens.

text-sm sm:text-base

🎯 Navigation Menus

Show horizontal navigation on tablets, hamburger on mobile.

hidden sm:flex

📏 Spacing Adjustments

Increase padding and margins for better visual breathing room.

p-4 sm:p-6

🖼️ Image Layouts

Stack images vertically on mobile, side-by-side on tablets.

flex-col sm:flex-row

🔘 Button Groups

Stack buttons on mobile, inline on tablets.

flex-col sm:flex-row

SM Breakpoint Strategy

Mobile-First Design

Base Styles (Mobile)

Start with mobile-optimized defaults:

  • • Single column layouts
  • • Smaller text sizes
  • • Compact spacing
  • • Stacked navigation

SM Enhancements

Add tablet improvements with sm: prefix:

  • • Multi-column grids
  • • Larger typography
  • • Increased spacing
  • • Horizontal layouts

Target Devices

📱 Mobile (< 640px)

  • • iPhone SE, iPhone 12/13 mini
  • • Small Android phones
  • • Portrait orientation
  • • Touch-first interaction

📱💻 SM+ (≥ 640px)

  • • iPad Mini, small tablets
  • • Large phones in landscape
  • • Small laptop screens
  • • More screen real estate

Best Practices

✅ Do

  • • Start with mobile styles, enhance with sm:
  • • Use sm:grid-cols-2 for simple two-column layouts
  • • Increase text sizes: text-sm sm:text-base
  • • Add breathing room: p-4 sm:p-6
  • • Test on real devices around 640px width
  • • Consider touch targets remain accessible

❌ Don't

  • • Skip mobile styles and only use sm: classes
  • • Make text too small on mobile or too large on tablets
  • • Create layouts that break between 640-768px
  • • Forget about landscape phone orientations
  • • Use complex grids that don't work on small tablets
  • • Ignore touch interaction patterns

Related Breakpoints

sm:

640px+

Current

md:

768px+

Medium

lg:

1024px+

Large

xl:

1280px+

Extra Large

2xl:

1536px+

2X Large