Skip to content

Instantly share code, notes, and snippets.

@zbeyens

zbeyens/gist:cc75251b021469cb547f7a3db0be8665

Created January 13, 2026 22:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zbeyens/cc75251b021469cb547f7a3db0be8665 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zbeyens/cc75251b021469cb547f7a3db0be8665 to your computer and use it in GitHub Desktop.
Download ZIP
custom-breakpoints
Raw
gistfile1.txt
## Custom Breakpoints
**IMPORTANT:** Use custom breakpoint syntax (`@xl`, `@3xl`, `@5xl`) instead of default Tailwind breakpoints:
```tsx
// ✅ Correct - Custom breakpoints
<div className="w-full @xl:w-1/2 @3xl:w-1/3 @5xl:w-1/4" />
<div className="block @max-xl:hidden @max-3xl:flex-col @max-5xl:gap-2" />
// ❌ Wrong - Default Tailwind breakpoints
<div className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4" />
```
**Breakpoints:** `@xl` (640px, replaces `sm:`), `@3xl` (1024px, replaces `md:`), `@5xl` (1280px, replaces `lg:`). Max-width: `@max-xl` (639px), `@max-3xl` (1023px), `@max-5xl` (1279px).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment