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.