Overriding color palette in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct way to override a color in Tailwind config

You want to override the default blue color in your Tailwind CSS configuration to a custom hex value #1E40AF. Which option correctly overrides the blue color without removing other default colors?

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: '#1E40AF',
      },
    },
  },
};

A module.exports = { theme: { extend: { colors: { blue: '#1E40AF' } } } };

B module.exports = { theme: { colors: { blue: '#1E40AF' } } };

C module.exports = { theme: { extend: { blue: '#1E40AF' } } };

D module.exports = { extend: { colors: { blue: '#1E40AF' } } };

💡 Hint

Use the extend key inside theme to add or override colors without removing defaults.

In Tailwind CSS, to override or add to the default theme colors, you must use extend inside the theme object. Option A correctly places the new blue color inside extend.colors, preserving other default colors.

🧠 Conceptual

intermediate

Effect of overriding colors without extend

What happens if you override the colors object directly inside theme in Tailwind config without using extend?

A The colors are ignored and default colors remain unchanged.

B Your custom colors are merged with default colors automatically.

C All default colors are replaced, only your custom colors remain.

D Tailwind throws a configuration error and fails to build.

💡 Hint

Think about what happens when you replace an object instead of extending it.

When you override the colors object directly inside theme, Tailwind replaces the entire default colors object with yours. This means only your custom colors are available, and all default colors are lost.

❓ selector

advanced

Using custom color in Tailwind CSS class

After overriding the primary color in your Tailwind config with #FF5733, which class will correctly apply this color as a background?

A bg-primary

B background-primary

C bg-primary-500

D background-primary-500

💡 Hint

Tailwind uses bg- prefix for background colors and the exact key name for custom colors.

When you add a custom color named primary in Tailwind config, you use bg-primary to apply it as a background color. The -500 suffix is used only for default color scales, not for single custom colors.

❓ layout

advanced

Responsive color override with Tailwind

You want the background color to be primary on small screens and secondary on medium and larger screens. Which class combination achieves this?

A bg-secondary md:bg-primary

B bg-primary md:bg-secondary

C md:bg-primary bg-secondary

D bg-primary bg-secondary md:bg-primary

💡 Hint

Tailwind uses prefixes like md: to apply styles at certain screen sizes.

The class bg-primary applies the background color on all screens by default. The md:bg-secondary overrides it on medium and larger screens. This combination sets primary on small and secondary on medium+ screens.

❓ accessibility

expert

Ensuring accessible contrast with custom colors

You override Tailwind's color palette with a custom brand color #123456. What should you do to ensure text using brand background is accessible for users with visual impairments?

A Add <code>aria-hidden="true"</code> to elements with <code>brand</code> background.

B Use the <code>brand</code> color for both background and text for consistency.

C Only rely on default Tailwind colors for text to ensure accessibility.

D Check contrast ratio and add a custom text color that meets WCAG standards.

💡 Hint

Accessibility means good contrast between text and background colors.

Custom colors may not have enough contrast with default text colors. To ensure accessibility, check the contrast ratio (using tools) and define a text color that meets WCAG guidelines when used on the custom background.

Practice

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

easy

A. To add or change colors to match your brand or design needs

B. To remove all default colors from Tailwind

C. To disable Tailwind's color utilities completely

D. To change the font sizes in Tailwind

Solution

1. Step 1: Understand Tailwind's default colors

   Tailwind provides a default color palette for quick styling.

2. Step 2: Purpose of overriding colors

   Overriding lets you add or change colors to fit your brand or design.

3. Final Answer:

   To add or change colors to match your brand or design needs -> Option A

4. Quick Check:

   Overriding colors = Customize palette [OK]

Hint: Overriding colors means customizing palette, not removing defaults [OK]

Common Mistakes:

• Thinking overriding removes all default colors
• Confusing color palette with font sizes
• Believing overriding disables Tailwind features

2. Which is the correct way to add a custom color named brandBlue without removing default colors in tailwind.config.js?

easy

A. extend: { colors: { brandBlue: '#1DA1F2' } }

B. colors: { brandBlue: '#1DA1F2' }

C. theme: { colors: { brandBlue: '#1DA1F2' } }

D. colors: extend { brandBlue: '#1DA1F2' }

Solution

1. Step 1: Use extend inside theme

   To add colors without removing defaults, use extend inside theme.

2. Step 2: Correct syntax for adding colors

   The correct syntax is extend: { colors: { brandBlue: '#1DA1F2' } }.

3. Final Answer:

   extend: { colors: { brandBlue: '#1DA1F2' } } -> Option A

4. Quick Check:

   Use extend to add colors [OK]

Hint: Always put new colors inside extend.colors to keep defaults [OK]

Common Mistakes:

• Adding colors directly under colors removes defaults
• Wrong object nesting in config
• Syntax errors like missing braces

3. Given this tailwind.config.js snippet, what background color will bg-brandBlue apply?

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

medium

A. A light gray color

B. The default Tailwind blue color

C. A bright blue color #1DA1F2

D. No color, it will cause an error

Solution

1. Step 1: Check the custom color definition

   The config adds brandBlue with hex #1DA1F2.

2. Step 2: Understand class usage

   The class bg-brandBlue uses this custom color as background.

3. Final Answer:

   A bright blue color #1DA1F2 -> Option C

4. Quick Check:

   bg-brandBlue = #1DA1F2 [OK]

Hint: Custom colors apply exactly as defined in config [OK]

Common Mistakes:

• Assuming default blue is used instead
• Thinking it causes an error without import
• Confusing color names with default palette

4. What is wrong with this Tailwind config snippet if you want to add a custom color but keep defaults?

module.exports = {
  theme: {
    colors: {
      brandRed: '#E02424'
    }
  }
}

medium

A. Custom colors must be outside the theme object

B. The color hex code is invalid

C. The config syntax is missing a comma

D. It removes all default colors because it overwrites colors directly

Solution

1. Step 1: Check how colors are added

   Adding colors directly under colors replaces all default colors.

2. Step 2: Correct way to keep defaults

   Use extend: { colors: { brandRed: '#E02424' } } inside theme to add without removing.

3. Final Answer:

   It removes all default colors because it overwrites colors directly -> Option D

4. Quick Check:

   Direct colors overwrite defaults [OK]

Hint: Direct colors overwrite defaults; use extend to add [OK]

Common Mistakes:

• Not using extend and losing default colors
• Thinking hex code is wrong
• Misplacing config keys

5. You want to override the Tailwind color palette to add brandGreen and also change the default blue color to #005f73. Which config snippet correctly does this?

hard

A. theme: { extend: { colors: { brandGreen: '#0a9396' } }, blue: '#005f73' }

B. theme: { extend: { colors: { brandGreen: '#0a9396', blue: '#005f73' } } }

C. theme: { extend: { colors: { brandGreen: '#0a9396' } }, colors: { blue: '#005f73' } }

D. theme: { colors: { brandGreen: '#0a9396', blue: '#005f73' } }

Solution

1. Step 1: Adding new colors

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

2. Step 2: Overriding existing colors

   To change default blue, use extend.colors.blue: '#005f73'; this overrides it while keeping other defaults.

3. Step 3: Correct config

   Place both in extend.colors: { brandGreen: '#0a9396', blue: '#005f73' }.

4. Final Answer:

   theme: { extend: { colors: { brandGreen: '#0a9396', blue: '#005f73' } } } -> Option B

5. Quick Check:

   New + override = extend.colors [OK]

Hint: Use extend.colors for adding new colors and overriding existing ones [OK]

Common Mistakes:

• Defining overrides under theme.colors (loses default palette)
• Overwriting colors without extend losing defaults
• Incorrect nesting of colors object