intermediate

Tailwind CSS

Use utility-first styling, variants, design tokens, extraction, and component boundaries without losing semantics.

Tailwind is utility-first CSS backed by a constrained design token scale and build-time purging of unused classes. Compose UI in markup; extract repeated patterns into components.

					<button class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus-visible:outline focus-visible:outline-2">
  Save
</button>

Variants (`hover:`, `md:`, `dark:`) encode state and breakpoints. Arbitrary values (`w-[37px]`) escape the scale — use rarely.

On interviews: readability versus speed, dead CSS elimination, design consistency, and component extraction boundaries.

Common pitfalls: copy-pasted utility strings become a hidden design system; arbitrary values bypass tokens; semantics lost in div soup.

The trade-off is fast local composition versus class-heavy markup and need for component extraction discipline.

Checklist:

Stay on the token scale by default.
Extract repeated UI into components.
Keep semantic HTML and focus states.
Audit arbitrary values in review.