tailwind.config.js defines design tokens: colors, spacing extensions, fonts, breakpoints, and plugins. Extend defaults rather than replacing them unless you intend a full retheme.
Example extend
theme: {
extend: {
colors: { brand: { DEFAULT: '#4f46e5', dark: '#4338ca' } },
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
},
}Generated utilities: bg-brand, text-brand-dark, font-sans.
Important interview questions and answers
- Q: extend vs override in theme?
A:extendmerges with defaults; top-level keys replace Tailwind’s default scale entirely. - Q: Where do content paths go?
A: Top-levelcontent: []array—required for purge in production builds.
Self-check
- How do you add a brand color without losing indigo defaults?
- Why must content paths be accurate?
Interview prep
- Why extend theme instead of arbitrary values everywhere?
Tokens stay consistent, purge-safe, and designers can reason about one scale—not one-off hex in markup.