Tailwind CSS
/Advanced
Debugging Questions
Definition
Scenario-based questions where a piece of Tailwind code is broken, and you must identify WHY it is broken and how to fix it.
Explain Like I'm New
Proving that you have real-world experience, because you've definitely hit these exact frustrating bugs before.
Real World Example
Being asked why a `z-50` dropdown menu is appearing underneath a `z-10` hero image.
Common Use Cases
- •Senior Technical Interviews
Terminal Output
bash / terminal
/*
Q: You have a button:
<button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:opacity-50">
Submit
</button>
You use React to add the HTML `disabled` attribute.
The button fades to 50% opacity correctly.
BUT, when you hover your mouse over the disabled button, it still turns dark blue (`bg-blue-600`). How do you stop this?
A: The `hover:` variant doesn't magically know the button is disabled. It still triggers.
You must stack the variants: `disabled:hover:bg-blue-500` to force it to stay the original color, OR simply use `disabled:pointer-events-none` so the button physically cannot register mouse hovers or clicks anymore.
*/
Interview Questions
basic
- You wrote `<div class="bg-red-500 hover:bg-blue">`. On hover, the background disappears instead of turning blue. Why?
intermediate
- You wrote `<div class="absolute top-0 right-0">` inside a Card component, but the div flew to the top right of the entire webpage. Why?