Tailwind CSS
/Intermediate
Responsive Design Questions
Definition
Testing the candidate's understanding of mobile-first architecture and complex responsive reordering.
Explain Like I'm New
The interviewer wants to see if you know how to make a website look good on a phone without writing a separate website.
Real World Example
Being asked: 'I have an image on the left and text on the right. On mobile, I want the text on TOP of the image. How do I do this?'
Common Use Cases
- •Frontend Developer Interviews
Terminal Output
bash / terminal
/*
Q: A developer wrote: `<div class="lg:w-1/2 md:w-full w-1/3">`
What is the width on a mobile phone? What is wrong with this code?
A: The width on a mobile phone is 33% (`w-1/3`).
The code is chronologically messy. It should be written in a Mobile-First order (smallest to largest) for readability:
`<div class="w-1/3 md:w-full lg:w-1/2">`
Also, having it start at 1/3, jump to full width on a tablet, and shrink back to 1/2 on a desktop is highly unusual responsive behavior.
*/
Interview Questions
basic
- Does `sm:text-lg` apply to screens smaller than the `sm` breakpoint?
intermediate
- How do you visually move an element to the top of a Flexbox column on mobile, but return it to its normal DOM order on desktop?