Organizing Your Styles & Customizing
Set up your website's main colors to match a brand.
Skill ID: OrganizingStyles_48
Description: Define custom brand colors in your Tailwind configuration.
Where to apply: Throughout the site for buttons, backgrounds, text.
Key Tailwind Classes:
tailwind.config.js
under
theme.extend.colors
.
Gotcha:
Overriding the
entire
default color palette instead of
extending
it. If you put your custom colors directly under
theme.colors
, you lose all of Tailwind's default colors. Using
theme.extend.colors
adds your colors alongside the defaults, which is usually what you want.
Example:
To add custom brand colors, you would modify your `tailwind.config.js` file like this:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#3490dc', // Example primary color
'brand-secondary': '#ffed4a', // Example secondary color
'brand-accent': '#e3342f', // Example accent color
},
},
},
plugins: [],
}
After defining these, you can use them in your HTML like any other Tailwind color utility:
Primary Background
Applied with
bg-brand-primary
Secondary Background
Applied with
bg-brand-secondary
Accent Text & Border
Applied with
text-brand-accent
and
border-brand-accent
Note:
After modifying
tailwind.config.js
, you typically need to recompile your CSS if you are using a build process (e.g., with PostCSS and Autoprefixer). If you are only using the CDN in development, changes might not reflect without a proper build setup for production.