Advanced Interview Questions

Definition

Deep-dive questions testing architectural knowledge, complex variant stacking, and JIT engine capabilities.

Explain Like I'm New

Proving that you can build enterprise-grade Design Systems and integrate Tailwind into massive React codebases gracefully.

Real World Example

Explaining the difference between `shadow`, `drop-shadow`, and how to implement custom plugins.

Common Use Cases

•Senior Developer Interviews
•UI Architect Interviews

Terminal Output

bash / terminal

/* Q: Explain the difference between `theme.colors` and `theme.extend.colors` in the tailwind.config.js file. A: Placing custom colors directly inside `theme.colors` will completely override and DESTROY Tailwind's entire default color palette (you will lose bg-blue-500, bg-red-500, etc). Placing them inside `theme.extend.colors` will append your custom colors to the existing default palette, allowing you to use both. */

Interview Questions

basic

What is the Just-In-Time (JIT) compiler in Tailwind?

intermediate

How do you handle dynamic class merging in React to prevent style conflicts (e.g., overriding a default `p-4` with `p-8`)?

Flash Cards

Question

What is JIT?

Click to reveal answer

Answer

An engine that compiles Tailwind CSS on-demand as you author your files, rather than generating all possible CSS upfront. This enables lightning-fast build times, arbitrary values (`w-[100px]`), and infinite variant stacking (`hover:focus:md:text-red-500`).

Question

Class merging in React?

Click to reveal answer

Answer

By using the `tailwind-merge` library. Standard string concatenation (`class="p-4 p-8"`) leaves it up to the CSS cascade, which is unpredictable. `tailwind-merge` intelligently analyzes the Tailwind classes and strips out the overridden `p-4` class entirely.