Interview Revision and Tailwind CSS Cheat Sheet
Consolidate key concepts, common interview questions, debugging heuristics, and a practical reference for daily work.
Core utilities quick reference
Use this as a memory aid, not as a replacement for understanding the underlying CSS.
| Goal | Common utilities |
|---|---|
| Layout | block, inline-flex, flex, grid, hidden |
| Flex alignment | items-center, justify-between, flex-col, flex-wrap |
| Grid | grid-cols-1, sm:grid-cols-2, gap-4 |
| Spacing | p-4, px-6, mt-3, gap-2, mx-auto |
| Sizing | w-full, max-w-5xl, min-h-screen, size-10 |
| Typography | text-sm, text-2xl, font-semibold, leading-7, tracking-tight |
| Color | bg-white, text-slate-700, border-slate-200 |
| Shape/elevation | rounded-xl, border, shadow-sm, ring-2 |
| Interaction | hover:*, focus-visible:*, disabled:*, active:* |
| Responsive | sm:*, md:*, lg:*, xl:* |
| Theme | dark:* |
| Motion | transition-colors, motion-reduce:* |
The exact utility availability and token values depend on the installed version and project theme.
display: flexdisplay: gridalign-items: centerjustify-content: space-betweenBreakpoint condition- Know the CSS concept behind each utility.
- Check the installed version for exact utilities and tokens.
- Use this table to revise, then practice composing complete layouts.
Common Tailwind CSS interview questions
1. What is utility-first CSS?
A styling approach that composes small single-purpose classes directly in markup.
2. How does responsive design work in Tailwind?
Base utilities apply by default, and breakpoint variants apply from their configured minimum width upward.
3. Why can dynamically constructed classes fail?
The complete class candidate may not appear in scanned source, so the build may not generate its CSS.
4. Is Tailwind a replacement for CSS?
No. It generates CSS utilities and still relies on CSS layout, cascade, and browser rendering.
5. How do you handle repeated UI patterns?
Use components or explicit variant maps when they create meaningful reuse, consistent behavior, or a stable API.
6. How do you debug a missing style?
Check the DOM class, candidate detection, generated rule, computed styles, cascade, and parent layout constraints.
7. How do you make a UI accessible?
Use semantic HTML, labels, visible keyboard focus, adequate contrast, correct states, and reduced-motion support where relevant.
8. What changed between v3 and v4?
The setup and configuration model changed, including a stronger CSS-first workflow in v4. Follow the migration guide for exact details.
Which statement about Tailwind CSS is correct?
Final project rubric and next steps
Score your dashboard from 0–2 in each area: layout, responsive behavior, visual hierarchy, interaction states, accessibility, theme consistency, source detection, and maintainability. A score of 0 means missing or broken; 1 means partially implemented; 2 means tested and reliable. Aim for 14/16 or higher before calling the project production-ready.
Continue learning by reading the official documentation for utilities you use frequently, then study CSS grid, flexbox, cascade layers, custom properties, responsive images, semantic HTML, and accessibility. Tailwind makes styling faster, but deep CSS knowledge makes your decisions better.
- Official documentation:
https://tailwindcss.com/docs - Interactive playground:
https://play.tailwindcss.com/ - Final deliverable:
Responsive, accessible TaskFlow dashboard
Rebuild one real screen from a design reference. Start with semantic structure and layout, then add typography, spacing, responsive variants, interaction states, and accessibility checks.
- A working project is stronger evidence of learning than memorized class names.
- Continue practicing CSS fundamentals alongside Tailwind.
- Use official documentation when version-specific behavior matters.