Tailwind CSS
/Intermediate
Mobile First Design
Definition
The architectural philosophy baked into Tailwind where unprefixed classes apply to mobile devices by default, and prefixed classes (`md:`) apply to larger screens.
Explain Like I'm New
Do not design the desktop site first! Design the tiny, stacked, one-column mobile layout using standard classes (`w-full`, `text-sm`). Then, add `md:` prefixes to expand the layout for laptops (`md:w-1/2`, `md:text-xl`).
Real World Example
Writing `<div class="text-center md:text-left">`. On a tiny phone, the text is centered for symmetry. Once the screen gets wide enough (`md:`), the text snaps to the left edge.
Common Use Cases
- •Modern web architecture
- •Tailwind best practices
Interactive Example
Interview Questions
basic
- If you write `<div class="lg:w-1/2">`, what is the width of the div on a mobile phone?
intermediate
- Why is Mobile-First considered better for performance than Desktop-First?