Tailwind CSS
/Beginner
Breakpoints
Definition
Responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) that allow you to conditionally apply CSS classes at specific screen widths.
Explain Like I'm New
Instead of writing complex `@media` queries in a CSS file to make your site work on mobile phones, you just prefix your classes. `w-full md:w-1/2` means: 'Be 100% wide on phones, but on Medium screens (tablets) and larger, be 50% wide'.
Real World Example
Hiding the sidebar navigation on a mobile phone (`hidden`), but revealing it when the user rotates their iPad to landscape or opens the site on a laptop (`md:block`).
Common Use Cases
- •Responsive web design
- •Mobile adaptation
Interactive Example
Interview Questions
basic
- What screen width roughly corresponds to the `md:` breakpoint in Tailwind?
intermediate
- If you write `<div class="bg-red-500 md:bg-blue-500 lg:bg-green-500">`, what color is the div on a massive 4K monitor?