Overriding color palette in Tailwind - Mini Project: Build & Apply

Overriding Color Palette in Tailwind CSS

📖 Scenario: You are building a simple webpage for a local bakery. The bakery wants a unique color theme that matches their brand colors instead of the default Tailwind colors.

🎯 Goal: Create a Tailwind CSS configuration that overrides the default color palette with the bakery's brand colors. Then use these custom colors in the webpage's background and text.

📋 What You'll Learn

Create a Tailwind CSS config file with a custom color palette

Add two custom colors: brand-primary with hex #D2691E and brand-secondary with hex #F5DEB3

Use brand-primary as the background color of the main section

Use brand-secondary as the text color inside the main section

Ensure the HTML uses semantic elements and is accessible

💡 Why This Matters

🌍 Real World

Many companies want their websites to match their brand colors exactly. Overriding Tailwind's color palette lets developers create consistent, branded designs quickly.

💼 Career

Web developers often customize CSS frameworks like Tailwind to meet client branding requirements. Knowing how to override and use custom colors is a key skill.

1

Create Tailwind CSS config file with default export

Create a file named tailwind.config.js and write export default {} to start the Tailwind CSS configuration.

Tailwind

# Create a file named tailwind.config.js and write export default {}

Need a hint?

This file tells Tailwind how to customize styles. Start with an empty export.

2

Add custom colors to the Tailwind config

Inside the tailwind.config.js file, add a theme object with a extend property. Inside extend, add a colors object with brand-primary set to "#D2691E" and brand-secondary set to "#F5DEB3".

Tailwind

export default {
  // Add theme.extend.colors with brand-primary and brand-secondary
}

Need a hint?

Use theme.extend.colors to add new colors without removing defaults.

3

Create HTML structure using custom colors

Create an index.html file with a <main> element. Inside <main>, add a <h1> with the text "Welcome to the Bakery". Use Tailwind classes bg-brand-primary on <main> and text-brand-secondary on <h1>.

Tailwind

Need a hint?

Use the custom colors as Tailwind classes exactly as bg-brand-primary and text-brand-secondary.

4

Add accessibility and responsive padding

In the index.html file, add role="main" to the <main> element for accessibility. Also add responsive padding classes p-4 sm:p-8 to <main> to make padding adjust on small screens.

Tailwind

  Welcome to the Bakery
  

Need a hint?

Use role="main" for screen readers and responsive padding classes p-4 sm:p-8 for better mobile experience.