The Styling Philosophy

How should we style components? Should it be in the JS file (Styled Components), in a separate CSS file (Modules), or in the HTML attributes (Tailwind)? There is no "Best" way, only Trade-offs.

1. TailwindCSS (Utility First)

Write raw CSS classes directly in your HTML. Pros: Insanely fast development, zero-config responsive states, and no "Dead CSS" because Tailwind purges unused classes. Cons: HTML can become messy and unreadable.

2. CSS-in-JS (Styled Components / Emotion)

Style your components using Template Literals in JS. Pros: Dynamic styling based on props (e.g., color={props.primary ? 'red' : 'blue'}) and perfect encapsulation. Cons: Runtime performance overhead and larger JS bundle size.

4. Interview Mastery

Q: "If you were building a high-performance e-commerce site, which styling strategy would you pick?"

Architect Answer: "I would pick **TailwindCSS** or **CSS Modules**. For e-commerce, the largest bottleneck is 'Time to Interactive.' CSS-in-JS libraries require a JS runtime to parse and inject styles, which delays physical rendering. Tailwind generates a tiny static CSS file that the browser can cache and apply instantly, providing the best possible Core Web Vitals for the user."