1
HTML/CSSBeginner#css#tailwind
HTML/CSSIntermediate#css#tailwind
How do you customize and extend Tailwind's default theme?
Answer
Tailwind is configured via tailwind.config.js, where you extend the theme object with custom colors, spacing, fonts, or breakpoints, merging with (or overriding) the defaults rather than editing the framework itself.
Example
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: { brand: '#ff6b35' },
spacing: { 18: '4.5rem' }
}
}
}
// usage: <div class="bg-brand p-18">