CSS Module 22
Utility-first CSS with Tailwind CSS 4 interview questions
Interview questions on utility-first CSS with Tailwind CSS 4: warm-ups, then what each harder question tests and how a good answer starts.
Warm-up questions
Short questions with short answers, each answered in full.
-
Fresher
What does "utility-first" mean, and how is it different from inline styles?
Answered in the lesson Utility-first CSS with Tailwind CSS v4
Questions with model answers
What each question tests, the first step of a good answer and the follow-ups to expect.
-
Fresher to mid
A React badge builds its colour classes as bg-${tone}-100 and text-${tone}-800. In production, red badges look right, but green and amber badges have no background or colour, and the build printed no warning. Explain what Tailwind did, why red works, and fix it.
- What it tests
- How Tailwind's scanner reads files as plain text, why a class can work by accident when another file spells it out, and the fixes: complete class names, a mapping, or a safelist.
- First step
- Search the compiled CSS for .bg-green-100: there is no rule. Tailwind never runs the component; it collects complete tokens from every file as text, and bg-${tone}-100 is not a class. Red works only because another file, an alert, writes bg-red-100 and text-red-800 in full.
- Follow-ups
-
- The tones come from a content management system at run time. What then?
- Why didn't the build fail or warn?
- How would you stop this kind of bug from reaching production again?
From the lesson Utility-first CSS with Tailwind CSS v4
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
- Pro pass · 1 week₹79$2.99
- 30 days₹179$5.99
- 1 year₹1,699$45
One payment; nothing renews unless you choose to. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes
-
Fresher to mid
A card has class="px-4 p-2 md:p-6 p-8" in Tailwind CSS 4. What padding does each side get at 360 px and at 1024 px, why, and how would you stop this kind of confusion in a team?
- What it tests
- Whether the order of classes in the attribute matters, how Tailwind orders the rules it generates, how shorthand and longhand utilities interact, and the rule of one class per property.
- First step
- Ignore the order in the attribute and read the stylesheet instead: the 4.3.3 CLI writes .p-2 before .p-8, then .px-4, and puts md:p-6 in a media block after all of them. So at 360 px p-8 beats p-2, and px-4 overrides the left and right padding.
- Follow-ups
-
- What changes when px-4 is removed?
- How should a component accept a padding override?
- Would the important modifier help here?
From the lesson Utility-first CSS with Tailwind CSS v4
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 2 minutes