Tailwind CSS
/Intermediate
Custom Breakpoints
Definition
Modifying or adding to Tailwind's default responsive screen sizes (`sm`, `md`, `lg`, `xl`).
Explain Like I'm New
Maybe your app has a really weird layout bug that ONLY happens exactly at 900px wide. You can add a custom breakpoint called `tablet-lg: '900px'`. Now you can write `<div class="tablet-lg:flex-col">` to fix that specific bug.
Real World Example
Creating an ultra-wide breakpoint for 4K curved monitors (`3xl: '2560px'`).
Common Use Cases
- •Handling specific device quirks (like iPad Pro)
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- Which property in `tailwind.config.js` is used to define breakpoints?
intermediate
- If you extend the `screens` object, do you retain the default `md` and `lg` sizes?