Extending default theme values in Tailwind - Mini Project: Build & Apply

Extending Default Theme Values in Tailwind CSS

📖 Scenario: You are building a simple webpage and want to customize the colors and font sizes beyond Tailwind's default options. This will help your site have a unique look while still using Tailwind's utility classes.

🎯 Goal: Extend the Tailwind CSS default theme by adding a new color called brandBlue with the hex value #1DA1F2 and a new font size called xxs with the size 0.65rem. Then use these new theme values in your HTML.

📋 What You'll Learn

Create a Tailwind config file with default theme extension

Add a new color brandBlue with value #1DA1F2

Add a new font size xxs with value 0.65rem

Use the new color and font size in HTML elements

💡 Why This Matters

🌍 Real World

Web developers often need to customize design systems to match brand colors and typography. Extending Tailwind's default theme allows easy reuse of these custom styles across a website.

💼 Career

Knowing how to extend Tailwind CSS themes is valuable for frontend developers working on modern web projects that require consistent branding and design customization.

1

Create the Tailwind config file with default theme import

Create a file named tailwind.config.js and write the code to import the default theme from tailwindcss/defaultTheme and export an empty module.exports object with a theme key containing an empty extend object.

Tailwind

// Create tailwind.config.js with defaultTheme import and empty extend
// Your code here

Hint

Use require('tailwindcss/defaultTheme') to import the default theme.

2

Add new color brandBlue and font size xxs to the extend object

Inside the extend object in tailwind.config.js, add a colors object with brandBlue set to '#1DA1F2' and a fontSize object with xxs set to '0.65rem'.

Tailwind

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      // Add colors and fontSize here
    },
  },
};

Hint

Put the new color inside colors and the new font size inside fontSize within extend.

3

Create a simple HTML file using the new theme values

Create an index.html file with a <div> that uses the Tailwind classes text-brandBlue and text-xxs to apply the new color and font size. Include the Tailwind CSS link in the <head>.

Tailwind

Hint

Use the new classes text-brandBlue and text-xxs on a div.

4

Add the Tailwind directives to your CSS file

Create a CSS file named input.css and add the Tailwind directives @tailwind base;, @tailwind components;, and @tailwind utilities; to it. This file will be used to generate your final CSS with the extended theme.

Tailwind

/* Create input.css with Tailwind directives */
/* Your code here */

Hint

These directives tell Tailwind to include its base styles, components, and utilities.

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