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:<br>

{
  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:<br>

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

<br>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.