Tailwind CSS Interview Questions

Tailwind CSS is a utility-first framework where you compose UI with small, single-purpose classes directly in markup.

Teams use it for speed, consistency, and fewer context switches between HTML and CSS files.

Utility-first means styling is built from low-level classes like p-4, text-sm, flex, and bg-slate-900.

Instead of writing many custom selectors, you compose styles declaratively per component.

Tailwind scans your source files and generates only classes that appear in your content paths.

This keeps production CSS small and avoids shipping a huge unused stylesheet.

tailwind.config (or v4 equivalent config patterns) is used to define theme tokens, spacing scales, custom colors, plugins, and content scanning.

It centralizes design system decisions.

You can extract repeated class sets into component abstractions (React components) or use utilities like @apply where appropriate.

Prefer component extraction for maintainability and explicit API boundaries.

Responsive prefixes apply classes at min-width breakpoints.

Example: text-sm lg:text-lg means small text by default and larger text on large screens.

Variants apply styles for interaction/state contexts, such as hover:, focus:, disabled:, and group-hover:.

They reduce custom CSS for common UI interactions.

dark: applies classes when dark mode is active based on the configured strategy (class or media).

Example: bg-white dark:bg-slate-900.

Arbitrary values let you use custom values directly in class names when needed.

Example: w-[42rem] or shadow-[0_8px_24px_rgba(0,0,0,0.12)].

Use helper utilities (clsx, cva) and split UI into smaller components.

Keep classes grouped by layout, spacing, typography, colors, and states for readability.

@layer allows organizing custom CSS into base, components, and utilities so Tailwind can merge and order styles correctly.

It helps when you need project-specific additions.

Preflight is Tailwind's base style reset/normalization.

It ensures consistent defaults across browsers and aligns with utility behavior.

Use group on parent and group-* variants on children.

Example: parent group, child group-hover:text-cyan-700.

peer lets one element react to a sibling's state.

Common for forms: input has peer, error/help text uses peer-invalid:block.

container gives responsive max-width presets; max-w-* gives explicit width control. Custom wrappers combine width, margin, and padding rules for consistent page layout.

Use whichever best matches your design system.