Tailwind interviews test utility-first CSS, purge/content configuration, design tokens, and composing maintainable UIs without classname chaos.
15 Tailwind CSS Interview Questions with Answers
Use the short version first, then offer trade-offs if the interviewer wants depth.
1. What is Tailwind CSS and the utility-first approach?
Tailwind provides low-level utility classes (flex, pt-4, text-center) you compose in HTML instead of writing bespoke CSS files per component. Design constraints live in tailwind.config theme tokens. The approach speeds iteration, enforces consistency, and shifts styling decisions adjacent to markup.
2. How does Tailwind keep production CSS small?
Tailwind scans content files listed in config (content: ["./src/**/*.{js,tsx}"]) and generates only CSS for classes actually used. Unused utilities are tree-shaken in production builds. JIT generates styles on demand during development for fast rebuilds.
3. Explain tailwind.config.js theme.extend vs theme override.
theme.extend merges custom colors, spacing, or fonts atop defaults—safest for most projects. Replacing theme.whole sections drops default scales unless you re-import presets. extend preserves Tailwind defaults while adding brand tokens like primary: "#0066cc".
4. When should you use @apply vs inline utilities?
Prefer inline utilities for one-off layouts—visible in markup, no context switching. Use @apply in @layer components for repeated patterns (buttons, cards) shared across many files. Over-@apply recreates traditional CSS components and loses utility transparency—balance with design system discipline.
5. How do responsive and state variants work?
Prefix utilities with breakpoint names: md:w-1/2 applies at min-width md. State variants like hover:bg-blue-600, focus-visible:ring, and group-hover:opacity-100 compose left-to-right. Order matters for variant stacking: dark:md:hover:bg-gray-800.
6. What are arbitrary values in Tailwind v3+?
Square bracket syntax sets one-off values: top-[117px], grid-cols-[1fr_500px], or bg-[url("/hero.jpg")]. Useful for pixel-perfect designs without polluting config. Prefer theme tokens when the value repeats—arbitrary values bypass design system consistency.
7. Compare class-based vs media dark mode strategies.
darkMode: "media" uses prefers-color-scheme automatically. darkMode: "class" toggles dark: variants when a .dark ancestor exists—required for user-controlled theme switches. Most apps with manual toggle choose class strategy on html or body.
8. How do you integrate Tailwind with React or Vue?
Install postcss and tailwind, import @tailwind base/components/utilities in global CSS, configure content paths to include component files, and use className with utilities or clsx/cn helpers for conditional classes. Framework starters (create-vite, Next) ship official Tailwind guides.
9. What is @layer and why use it?
@layer base, components, utilities control cascade order when adding custom CSS alongside generated utilities. Custom base styles belong in @layer base; component extractions in @layer components. It prevents custom rules from accidentally overriding utilities unpredictably.
10. How do Tailwind plugins extend the framework?
Plugins add utilities, components, or variants via tailwind.plugin—official @tailwindcss/forms, typography, and aspect-ratio are examples. Teams write plugins for internal design tokens or complex grid patterns reused across products.
11. Critics say Tailwind clutters HTML—how do you respond?
Utility classes colocate styling with structure, reduce naming fatigue, and delete unused CSS automatically. Extract components when patterns repeat; use editor snippets and cn() helpers. Compare to CSS modules where dead styles often linger unnoticed in large repos.
12. How does Preflight affect base styles?
Preflight is Tailwind reset/normalize on @tailwind base—removes default margins, sets border-box, normalizes headings. It can surprise teams expecting browser defaults. Override in @layer base or disable Preflight selectively if integrating with legacy CSS carefully.
13. Explain tailwind-merge or clsx in component libraries.
Conditional classes need merging without conflicts—tailwind-merge resolves contradictory utilities (p-2 vs p-4) keeping the last intentional winner. clsx toggles classes by boolean props. shadcn/ui popularized cn() combining clsx and tailwind-merge for variant APIs.
14. How would you migrate from Bootstrap to Tailwind?
Audit components, map Bootstrap spacing/colors to theme.extend tokens, rewrite markup utility-by-utility or rebuild design system primitives, run visual regression tests, and remove Bootstrap CSS once coverage is complete. Migrate page-by-page to limit blast radius.
15. Tailwind v4 changes interviewers might mention?
Tailwind v4 moves toward CSS-first configuration with @theme in CSS, faster Oxide engine, and simplified setup via @tailwindcss/vite. Know that config may live in CSS files and content detection improves—check project version before deep config questions.
Pro Tip
Walk through how purge/content scanning works— it shows you understand Tailwind production behavior, not just class names.