Tailwind CSS Interview Questions and Answers

Utility-first means composing small, single-purpose classes directly in markup instead of writing semantic class names and separate stylesheets. In Tailwind, a class list describes the result without inventing names.

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

Benefits: no naming debates, no unused CSS accumulating, styling colocated with markup so deleting a component removes its styles, and design-system constraints on spacing, colour and type that produce visual consistency. Responsive and state variants become trivial through prefixes.

Trade-offs: markup is verbose and long class strings can be hard to scan, though extracting components solves that better than @apply. Teams new to it often overuse @apply and recreate the same bespoke stylesheet problem. The approach works best with a component-driven UI where repetition is encapsulated in components rather than CSS classes.

Tailwind encodes variants as prefixes. Responsive breakpoints are mobile-first: sm, md, lg, xl and 2xl apply at that minimum width and above.

<div class="w-full md:w-1/2 lg:w-1/3">...</div>

That element is full width on small screens, half at md and a third at lg. Dark mode is configured in tailwind.config.js with darkMode: 'media', which follows the operating system, or 'class', which is toggled by adding dark to an ancestor and suits a manual switch. Then dark:bg-gray-900 applies in dark mode.

Variants compose, including with each other, so dark:md:hover:bg-black is valid. Other built-in variants include hover, focus, active, disabled, group-hover, peer-checked, motion-safe, print, and aria- and data-attribute selectors. Custom variants can be registered with addVariant.

Because the JIT engine generates only the classes you actually use, variants cost nothing until referenced.