How do you customise the Tailwind theme and configuration?
Assesses fundamental understanding of Tailwind CSS conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Tailwind is configured in tailwind.config.js. The content array tells the engine where to scan for class names, and theme customises the design tokens. extend adds to the defaults, while assigning a key directly replaces them.
module.exports = {
content: ['./src/**/*.{html,js,svelte,tsx}'],
theme: {
extend: {
colors: { brand: { DEFAULT: '#0ea5e9', dark: '#0369a1' } },
spacing: { 18: '4.5rem' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
},
},
plugins: [],
};
Prefer extend so utilities like p-4 keep working. You can reference other tokens with theme() in CSS or with functions in the config, add custom screens for breakpoints, and register official plugins such as @tailwindcss/forms and @tailwindcss/typography.
In Tailwind v4 much of this moves into CSS with @theme and @import "tailwindcss", and content is auto-detected, but the token idea is unchanged.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.