Extending default theme values in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the Tailwind theme colors with a new color named 'brand'.

Tailwind

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

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

A'red-600'

B'#1DA1F2'

C'#000000'

D'blue-500'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a default color name like 'blue-500' instead of a hex code.

Not wrapping the color value in quotes.

The 'brand' color is added with the hex value '#1DA1F2'. This extends the default colors without replacing them.

2fill in blank

medium

Complete the code to extend the Tailwind theme fontSize with a new size called 'xxs' set to '0.65rem'.

Tailwind

module.exports = {
  theme: {
    extend: {
      fontSize: {
        xxs: [1]
      }
    }
  }
}

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

A0.5rem

B0.75rem

C'1rem'

D'0.65rem'

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers without quotes for font sizes.

Using an incorrect size value.

The new font size 'xxs' is added as a string with the value '0.65rem'. This extends the default font sizes.

3fill in blank

hard

Fix the error in the code to correctly extend the Tailwind spacing scale by adding '72' as '18rem'.

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        72: [1]
      }
    }
  }
}

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

A'18rem'

B18rem

C'72rem'

D72

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers without quotes for spacing values.

Using wrong units or missing quotes.

Spacing values must be strings with units like 'rem'. So '18rem' must be wrapped in quotes.

4fill in blank

hard

Fill in the blank to extend the Tailwind theme with a new boxShadow named 'soft' and set it to '0 2px 8px rgba(0, 0, 0, 0.1)'.

Tailwind

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        soft: [1]
      }
    }
  }
}

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

A'0 2px 8px rgba(0, 0, 0, 0.1)'

B'0 4px 6px rgba(0, 0, 0, 0.1)'

D'0 1px 3px rgba(0, 0, 0, 0.1)'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong shadow values.

The boxShadow 'soft' is set to the string '0 2px 8px rgba(0, 0, 0, 0.1)'.

5fill in blank

hard

Fill all three blanks to extend the Tailwind theme with a new zIndex named 'max' set to 9999 and a new borderRadius named 'xl' set to '1rem'.

Tailwind

module.exports = {
  theme: {
    extend: {
      zIndex: {
        max: [1]
      },
      borderRadius: {
        xl: [2]
      },
      colors: {
        highlight: [3]
      }
    }
  }
}

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

A9999

B'1rem'

C'#ff0'

D'2rem'

Attempts:

3 left

💡 Hint

Common Mistakes

Putting numbers in quotes for zIndex.

Not quoting the borderRadius value.

Using invalid color values.

The zIndex 'max' is set to the number 9999 (no quotes). The borderRadius 'xl' is set to the string '1rem'. The color 'highlight' is set to the hex color '#ff0'.