Overriding color palette in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of overriding the color palette in Tailwind CSS?

Overriding the color palette lets you customize the default colors to match your brand or design needs, making your website unique and consistent.

beginner

Where do you define custom colors to override the default palette in Tailwind CSS?

You define custom colors inside the tailwind.config.js file under the theme.extend.colors section.

intermediate

How do you keep the default colors and add new custom colors in Tailwind?

Use theme.extend.colors to add new colors without removing the default palette. This way, you extend instead of replace the colors.

intermediate

What happens if you define colors directly under theme.colors instead of theme.extend.colors?

Defining colors directly under theme.colors replaces the entire default color palette, removing all default colors.

beginner

Show a simple example of overriding the color palette to add a custom blue color named brandBlue.

In tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brandBlue: '#1E40AF'
      }
    }
  }
}

Where should you add custom colors to keep the default Tailwind colors?

A Inside theme.extend.colors

B Inside theme.colors

C Inside plugins array

D Inside purge array

Adding custom colors inside theme.extend.colors extends the default palette without removing it.

What is the effect of defining colors directly under theme.colors in tailwind.config.js?

A It removes all default colors and replaces them

B It causes an error

C It has no effect

D It extends the default colors

Defining colors directly under theme.colors replaces the entire default palette.

Which file do you edit to override the Tailwind color palette?

A index.html

B package.json

C tailwind.config.js

D styles.css

The tailwind.config.js file is where you customize Tailwind settings including colors.

If you want a custom color named 'brandRed' with hex #FF0000, how do you add it without losing default colors?

A Add brandRed under theme.colors

B Add brandRed in index.html

C Add brandRed in styles.css

D Add brandRed under theme.extend.colors

Adding under theme.extend.colors keeps default colors and adds brandRed.

Why is it important to override colors instead of editing Tailwind source files?

A Because Tailwind source files are read-only

B To keep Tailwind updates easy and avoid losing changes

C Because colors cannot be changed

D To make the website load faster

Overriding colors in config keeps your changes safe during Tailwind updates.

Explain how to add a new custom color to Tailwind CSS without losing the default colors.

Think about extending the theme instead of replacing it.

Describe the difference between defining colors under theme.colors and theme.extend.colors in Tailwind.

One replaces, the other extends.