Breakpoints Wizard

Define custom breakpoints with visual controls.

---

Load Preset

Quick Start: Load Preset

Click “Load Preset” → Choose from 3 preset options:

Preset 1: mob, tab, desk

Name	Value	Device
mob	768px	Mobile
tab	1024px	Tablet
desk	1440px	Desktop

Preset 2: mobile, tablet, desktop

Name	Value	Device
mobile	768px	Mobile
tablet	1024px	Tablet
desktop	1440px	Desktop

Preset 3: sm, md, lg, xl

Name	Value	Device
sm	640px	Small tablets
md	768px	Tablets
lg	1024px	Laptops
xl	1280px	Desktops

Add Breakpoint Manually

Each breakpoint requires name and value:

1. Click “Add Breakpoint”
2. Name: tablet (becomes tablet: prefix)
3. Value: Screen width (e.g., 768px)
4. Save

Result: tablet:flex, tablet:hidden, etc. available.

---

Min and Max Breakpoints

Tailwind v4 manages both directions automatically:

Min-width (default):

<div class="tablet:flex">Shows flex on tablet and up</div>

Max-width (Tailwind v4):

<div class="max-tablet:hidden">Hidden on tablet and down</div>

No “Desktop First” toggle needed – Tailwind v4 handles both with min- and max- prefixes.

---

Extend vs Replace Tailwind Defaults

Extend (Default): Your breakpoints + Tailwind defaults

Replace: Only your custom breakpoints

Toggle: Settings tab → “Extend Breakpoints” → OFF

Why replace?

• ✅ Cleaner autocomplete
• ✅ Enforce design system
• ✅ Match your exact screen sizes

---

More Examples

Mobile-first (min-width):

<div class="text-sm md:text-base lg:text-lg">
  Small text on mobile, base on tablet, large on laptop
</div>

Desktop-first (max-width):

<div class="block max-md:hidden">
  Block by default, hidden on tablet and down
</div>

Range (between breakpoints):

<div class="md:block max-lg:flex">
  Block on tablet, flex between tablet and laptop
</div>