Tailwind CSS Interview Questions

Define shared tokens in theme config (colors, spacing, font sizes) or CSS variables, then reference them through utilities.

This keeps UI consistent and easier to evolve.

Use visible keyboard focus classes such as focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500.

Never remove focus indication without adding a strong replacement.

• Incorrect content scanning paths (missed class detection).
• Overuse of dynamic class strings that cannot be statically found.
• Excessive arbitrary values when tokens should be reused.

Use utilities like clsx with booleans.

Example:

className={clsx("rounded-xl px-4 py-2", isActive ? "bg-cyan-700" : "bg-slate-200")}

It provides sensible prose defaults for content-rich markdown/HTML blocks.

Great for blog posts, docs, and Q&A answers where plain utilities are verbose.

Define keyframes and animation names in Tailwind config (or CSS layer), then use utility classes like animate-fade-in.

Keep motion subtle and respect reduced-motion preferences.

Tailwind v4 shifts configuration and authoring ergonomics compared to earlier versions, with stronger CSS-variable patterns and updated directives.

When working in an existing project, follow the repo's established Tailwind syntax and conventions.

• Build reusable components with clear props.
• Use shared tokens and avoid random one-off styles.
• Keep utility order and formatting consistent.
• Review accessibility and responsiveness as part of component development.

Use custom CSS for complex keyframes, third-party overrides, advanced selectors, or patterns that are hard to express cleanly in utilities.

Tailwind and custom CSS should complement each other.

Migrate component-by-component, keeping visual parity first. Replace repeated CSS patterns with utility composition and shared components.

Avoid big-bang rewrites that are difficult to validate.

Include all template/source directories where class names appear. Missing paths cause classes to be purged from build output.

Safelisting preserves classes that might be generated dynamically and not discoverable in static scans.

Class scanners may not detect runtime-generated strings, leading to missing styles in production.

Map state to explicit class strings in objects instead of constructing arbitrary strings at runtime.

Use design tokens, component wrappers, and utility conventions reviewed by code guidelines.