HuntExams Academy
HTML/CSSIntermediate#css#tailwind

How do you customize and extend Tailwind's default theme?

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">

Related Questions

1
HTML/CSSBeginner#css#tailwind

What are Tailwind's responsive and state variant prefixes?

Open
2
HTML/CSSAdvanced#css#cross-browser

What are common cross-browser compatibility issues in CSS and how do you handle them?

Open
3
HTML/CSSBeginner#css#cross-browser

What is a CSS reset or normalize.css and why use one?

Open