Training Trains Internship
Student login
← Tailwind CSS & Bootstrap learning path
Tailwind CSS & Bootstrap · Module 8 of 10

Customising Tailwind

Add brand colours, fonts and reusable styles.

📖 Key ideas

  1. Tailwind v4: customise with @theme { --color-brand: #047857; } in CSS.
  2. Then use bg-brand, text-brand.
  3. Add custom fonts: --font-display.
  4. Reuse patterns with components (React/Vue) rather than long repeated strings.
  5. @apply can compose utilities in CSS when needed.
💡 Real-life example: Customising Tailwind is adding your own spices to the rack so every recipe can use them.
@themeDefines design tokens in Tailwind v4
Design tokenNamed value like a brand colour
@applyUses utilities inside CSS rules
PluginAdds new utilities or components