Overriding color palette in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to override the default blue color in Tailwind CSS.

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: [1]
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

A'blue-500'

B'#1DA1F2'

C{ '500': '#1DA1F2' }

D{ blue: '#1DA1F2' }

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an object for colors.

Not specifying the shade key like '500'.

To override the blue color, you provide an object with shade keys like '500' and their color values.

2fill in blank

medium

Complete the code to add a custom color named 'brand' with hex #123456.

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: [1]
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

A'#123456'

B{ 'DEFAULT': '#123456' }

C'brand-500'

D{ brand: '#123456' }

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string directly without 'DEFAULT' key.

Nesting the color under the same name again.

Custom colors can be objects with a 'DEFAULT' key to define the base color.

3fill in blank

hard

Fix the error in the code to correctly override the red color's 600 shade.

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        red: [1]
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

A{ 600: '#E3342F' }

B'#E3342F'

C{ red: '#E3342F' }

D'red-600'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of an object.

Nesting the color under 'red' again.

To override a specific shade, provide an object with the shade as key and the color as value.

4fill in blank

hard

Fill both blanks to add a custom green color with shades 400 and 700.

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        green: {
          400: [1],
          700: [2]
        }
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

A'#68D391'

B'#2F855A'

C'#48BB78'

D'#276749'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the shade numbers and colors.

Using invalid hex codes.

Shade 400 is '#48BB78' and shade 700 is '#276749' for green in Tailwind.

5fill in blank

hard

Fill all three blanks to override the gray color with shades 100, 500, and 900.

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        gray: {
          100: [1],
          500: [2],
          900: [3]
        }
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

A'#F7FAFC'

B'#A0AEC0'

C'#1A202C'

D'#CBD5E0'

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the colors for different shades.

Using colors not matching Tailwind's gray scale.

Shade 100 is '#F7FAFC', 500 is '#A0AEC0', and 900 is '#1A202C' for gray in Tailwind.

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