Extending default theme values in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding theme extension in Tailwind CSS

What happens when you add new colors inside the extend section of the Tailwind theme configuration?

Tailwind

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

A The new colors replace all the default colors in Tailwind.

B The new colors are ignored unless you remove the default colors first.

C The new colors are added alongside the default colors without replacing them.

D Tailwind throws an error because colors cannot be extended.

💡 Hint

Think about how extend works compared to overriding the whole theme.

Using extend inside the theme adds new values to the existing default theme without removing them. This means you keep all default colors and add your custom ones.

📝 Syntax

intermediate

Correct syntax for extending font sizes

Which option correctly extends the default font sizes by adding a new size called xxs with value 0.65rem?

Tailwind

module.exports = {
  theme: {
    extend: {
      fontSize: {
        xxs: '0.65rem'
      }
    }
  }
}

A fontSize: { xxs: '0.65rem' }

B fontSizes: { xxs: '0.65rem' }

C fontSize: ['xxs', '0.65rem']

D fontSize: { 'xxs': 0.65 }

💡 Hint

Check the exact property name and value format Tailwind expects.

The correct property is fontSize (singular), and values must be strings with units like rem. Option A matches this exactly.

❓ rendering

advanced

Visual effect of extending spacing scale

If you extend the spacing scale with 72: '18rem' and use class="mt-72" on a div, what will you see?

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem'
      }
    }
  }
}

A Tailwind will throw an error because spacing keys must be strings, not numbers.

B The div will have no margin because 72 is not a valid spacing value.

C The div will have a top margin of 72px instead of 18rem.

D The div will have a top margin of 18rem, creating a large vertical space above it.

💡 Hint

Remember how Tailwind spacing keys can be numbers as strings and map to CSS sizes.

Extending spacing with key 72 and value 18rem adds a new margin/padding size. Using mt-72 applies margin-top of 18rem, which is a large vertical space.

❓ selector

advanced

Using extended colors in Tailwind selectors

After extending the colors with brandRed: '#e3342f', which class applies the background color correctly?

Tailwind

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

A bg-brandRed

B background-brandRed

C bg-brandred

D bg-brand-red

💡 Hint

Tailwind class names are case sensitive and use kebab-case for multi-word names.

Tailwind uses the exact key name for colors in class names, preserving case. Since the key is brandRed, the class is bg-brandRed. Other options are invalid or misspelled.

❓ accessibility

expert

Ensuring accessible color contrast with extended theme colors

You extended Tailwind colors with softGreen: '#a8d5ba'. Which approach best ensures text using text-softGreen is accessible on a white background?

Tailwind

module.exports = {
  theme: {
    extend: {
      colors: {
        softGreen: '#a8d5ba'
      }
    }
  }
}

A Use <code>text-softGreen</code> alone; the color is light enough for all users.

B Use <code>font-bold</code> with <code>text-softGreen</code> to increase contrast and readability.

C Add <code>bg-white</code> and <code>opacity-50</code> to the text to soften the color.

D Use <code>text-softGreen</code> with <code>underline</code> to improve accessibility.

💡 Hint

Think about how font weight affects color contrast and readability.

Light colors on white backgrounds can be hard to read. Making text bold increases contrast and improves accessibility. Simply using the color alone or adding opacity reduces contrast. Underline does not affect color contrast.