Extending default theme values in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean to extend default theme values in Tailwind CSS?

Extending default theme values means adding new styles or values to Tailwind's built-in design system without removing or replacing the original ones. It helps keep the default styles while customizing your project.

beginner

How do you extend colors in Tailwind's theme configuration?

You add new colors inside the extend section of the theme in tailwind.config.js. For example:

{
  theme: {
    extend: {
      colors: {
        brandBlue: '#1DA1F2'
      }
    }
  }
}

intermediate

Why should you use extend instead of replacing the whole theme section?

Using extend keeps all the default Tailwind styles intact and only adds your custom values. Replacing the whole theme section removes all defaults, which can break your design or require redefining everything.

beginner

What is the file name where you extend Tailwind's default theme values?

The file is tailwind.config.js. This is where you configure and extend Tailwind's default theme settings for your project.

intermediate

Give an example of extending font sizes in Tailwind CSS.

Inside tailwind.config.js, add:

{
  theme: {
    extend: {
      fontSize: {
        'xxs': '0.65rem'
      }
    }
  }
}

This adds a new font size called xxs without removing the default sizes.

Where do you add custom values to extend Tailwind's default theme?

A In the <code>package.json</code> file

B Directly inside the <code>theme</code> key without <code>extend</code>

C In the HTML file using <code>&lt;style&gt;</code> tags

D Inside the <code>extend</code> key in <code>theme</code> of <code>tailwind.config.js</code>

Custom values should be added inside the extend key to keep default styles and add new ones.

What happens if you replace the entire theme object instead of extending it?

A You remove all default styles and only use your custom ones

B You keep all default styles and add new ones

C Tailwind automatically merges defaults for you

D It causes an error and stops compiling

Replacing the whole theme removes default styles, so only your custom styles remain.

Which file controls Tailwind's theme extensions?

A index.html

B tailwind.config.js

C styles.css

D package.json

The tailwind.config.js file is where you configure and extend Tailwind's theme.

How would you add a new color named 'brandGreen' with hex '#00FF00'?

A Add <code>brandGreen: '#00FF00'</code> in your CSS file

B Add <code>brandGreen: '#00FF00'</code> directly in <code>theme</code>

C Add <code>colors: { brandGreen: '#00FF00' }</code> inside <code>extend</code> in <code>theme</code>

D Add <code>brandGreen: '#00FF00'</code> in your HTML file

You add new colors inside the extend section of theme in tailwind.config.js.

Why is extending theme values helpful?

A It lets you customize styles without losing default Tailwind utilities

B It disables all default styles

C It makes Tailwind slower

D It removes unused CSS automatically

Extending allows adding custom styles while keeping all default Tailwind utilities available.

Explain how to extend the default theme values in Tailwind CSS and why it is important.

Think about adding new styles without losing what Tailwind already provides.

Describe the difference between replacing the theme object and extending it in Tailwind CSS.

Consider what happens to default styles in each case.

Practice

1. What is the main purpose of using extend inside the theme in Tailwind CSS?

easy

A. To remove unused styles from Tailwind CSS

B. To completely replace the default Tailwind styles

C. To add new styles without removing the default Tailwind styles

D. To disable Tailwind's default configuration

Solution

1. Step 1: Understand the role of extend in Tailwind

   The extend key inside theme allows you to add new values while keeping the default ones intact.

2. Step 2: Compare with replacing defaults

   If you don't use extend and directly define values, you replace the defaults, losing them.

3. Final Answer:

   To add new styles without removing the default Tailwind styles -> Option C

4. Quick Check:

   Extend = Add without losing defaults [OK]

Hint: Remember: extend adds, doesn't replace defaults [OK]

Common Mistakes:

• Thinking extend replaces default styles
• Confusing extend with purge or disable
• Assuming extend removes unused styles

2. Which of the following is the correct syntax to add a new color named brandBlue with hex #1DA1F2 using extend in Tailwind config?

easy

A. "theme": { "extend": { "colors": { "brandBlue": "#1DA1F2" } } }

B. "extend": { "colors": { "brandBlue": "#1DA1F2" } }

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

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

Solution

1. Step 1: Locate where to put extend

   The extend key must be inside the theme object to add new values.

2. Step 2: Add new color inside extend.colors

   The new color name and value go inside colors nested under extend.

3. Final Answer:

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

4. Quick Check:

   Extend inside theme, colors inside extend [OK]

Hint: Put extend inside theme, then add colors inside extend [OK]

Common Mistakes:

• Placing extend outside theme
• Adding colors directly inside theme without extend
• Misplacing extend inside colors

3. Given this Tailwind config snippet, what will be the background color class for the new color?

{
  theme: {
    extend: {
      colors: {
        softGreen: '#a8d5ba'
      }
    }
  }
}

Which class applies the new color as background?

medium

A. bg-softgreen

B. bg-soft_green

C. bg-soft-green

D. bg-softGreen

Solution

1. Step 1: Understand Tailwind class naming for custom colors

   Tailwind generates utility classes using the exact key name from the theme object as the class suffix, preserving case and format. softGreen (camelCase) becomes bg-softGreen.

2. Step 2: Form the background color class

   Background color classes are bg- followed by the exact color key name.

3. Final Answer:

   bg-softGreen -> Option D

4. Quick Check:

   Exact key match: softGreen -> bg-softGreen [OK]

Hint: Theme keys match class suffixes exactly, case preserved [OK]

Common Mistakes:

• Assuming Tailwind converts camelCase to lowercase
• Adding hyphens between camelCase words
• Using underscores in place of camelCase

4. Identify the error in this Tailwind config snippet that tries to add a new spacing value:

{
  theme: {
    extend: {
      spacing: 72: '18rem'
    }
  }
}

medium

A. Spacing key should be inside colors

B. Missing curly braces around spacing values

C. Colon used instead of comma between key and value

D. extend should be outside theme

Solution

1. Step 1: Check syntax for spacing extension

   The spacing key must have an object with key-value pairs inside curly braces.

2. Step 2: Identify missing braces

   Here, spacing: 72: '18rem' misses curly braces around { 72: '18rem' }.

3. Final Answer:

   Missing curly braces around spacing values -> Option B

4. Quick Check:

   Objects need braces: spacing: { 72: '18rem' } [OK]

Hint: Use braces {} for objects inside extend keys [OK]

Common Mistakes:

• Forgetting braces around nested objects
• Putting spacing inside colors by mistake
• Placing extend outside theme

5. You want to add a new font size called xxl with value 2.5rem but keep all default font sizes. Which config snippet correctly extends the fontSize theme without losing defaults?

hard

A. { theme: { extend: { fontSize: { xxl: '2.5rem' } } } }

B. { theme: { fontSize: { xxl: '2.5rem' } } }

C. { extend: { fontSize: { xxl: '2.5rem' } } }

D. { fontSize: { xxl: '2.5rem' } }

Solution

1. Step 1: Understand how to keep default font sizes

   To keep defaults, new values must be added inside extend under theme.

2. Step 2: Check each option's structure

   { theme: { extend: { fontSize: { xxl: '2.5rem' } } } } correctly places fontSize inside extend inside theme. Others replace or misplace keys.

3. Final Answer:

   { theme: { extend: { fontSize: { xxl: '2.5rem' } } } } -> Option A

4. Quick Check:

   Extend inside theme keeps defaults while adding new values [OK]

Hint: Always put new values inside extend under theme [OK]

Common Mistakes:

• Replacing fontSize directly, losing defaults
• Placing extend outside theme
• Omitting extend and overwriting defaults