Tailwind CSS
/Intermediate
Theme Extension
Definition
The practice of adding custom colors, fonts, spacing, and sizing to Tailwind's default design system via the `tailwind.config.js` file.
Explain Like I'm New
Tailwind comes with 100 default colors. If your company uses a highly specific shade of 'Brand Purple', you don't write `style="color: #6B21A8"`. You register 'brand-purple' in the config file, and Tailwind instantly generates `bg-brand-purple`, `text-brand-purple`, `border-brand-purple`, etc.
Real World Example
Defining a custom `fontFamily` called 'Corporate' so developers can just type `font-corporate`.
Common Use Cases
- •Implementing company design systems
- •White-labeling apps
Interactive Example
Loading...
Console output will appear here...
Interview Questions
basic
- Which property inside `tailwind.config.js` do you use to add new values without deleting the default ones?
intermediate
- What happens if you define a custom color outside of the `extend` block, directly inside `theme.colors`?