Why theme customization is needed in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a custom primary color in Tailwind CSS.

Tailwind

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

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

Ablue-500

Bprimary-color

C#1DA1F2

Drgb(29, 161, 242)

Attempts:

3 left

💡 Hint

Common Mistakes

Using Tailwind class names like 'blue-500' instead of color values.

The primary color must be a valid color value like a hex code. Here, #1DA1F2 is a hex color code for a blue shade.

2fill in blank

medium

Complete the code to apply the custom primary color as background in a Tailwind class.

Tailwind

<div class="bg-[1] p-4 text-white">Hello!</div>

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

Aprimary

Bblue-600

Cprimary-color

Dbg-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'bg-' twice like 'bg-bg-primary'.

When you define a custom color named 'primary' in Tailwind, you use it as bg-primary in class names. Here, only 'primary' fits after 'bg-'.

3fill in blank

hard

Fix the error in the Tailwind config to properly extend the font family.

Tailwind

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

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

A{ sans: ['Inter', 'sans-serif'] }

B['Inter', 'sans-serif']

C{ 'sans': 'Inter, sans-serif' }

D['sans', 'Inter', 'sans-serif']

Attempts:

3 left

💡 Hint

Common Mistakes

Using a plain array instead of an object.

Using a string instead of an array for fonts.

The fontFamily property expects an object with keys as font family names and values as arrays of font names. Option A is the correct format.

4fill in blank

hard

Fill both blanks to create a custom spacing scale and use it in padding.

Tailwind

<div class="p-[1]">Content</div>

module.exports = {
  theme: {
    extend: {
      spacing: {
        '[2]': '3.5rem'
      }
    }
  }
}

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

A14

B16

C14px

Dxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using '14px' as key which is invalid.

Using 'xl' which is not a number key.

The spacing key '14' corresponds to the class p-14. Defining '14' in spacing with '3.5rem' allows using p-14 for padding.

5fill in blank

hard

Fill all three blanks to create a custom box shadow and apply it in a class.

Tailwind

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

<div class="shadow-[3] p-4">Box Shadow Example</div>

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

Acustom

B0 4px 6px -1px rgba(0,0,0,0.1)

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching the key and class name.

Using invalid shadow CSS.

The custom box shadow is named 'custom' in the config and used as shadow-custom in the class. The value is the shadow CSS string.

Practice

1. Why is theme customization important when using Tailwind CSS?

easy

A. It helps make your website look unique and match your brand.

B. It automatically fixes all CSS bugs in your project.

C. It removes the need to write any CSS code.

D. It disables all default Tailwind styles.

Solution

1. Step 1: Understand the purpose of theme customization

   Theme customization allows you to change colors, fonts, and spacing to fit your brand style.

2. Step 2: Identify the correct benefit

   Making your website unique and matching your brand is the main reason for customizing the theme.

3. Final Answer:

   It helps make your website look unique and match your brand. -> Option A

4. Quick Check:

   Theme customization = Unique brand style [OK]

Hint: Theme customization = unique look for your brand [OK]

Common Mistakes:

• Thinking it fixes CSS bugs automatically
• Believing it removes all CSS coding
• Assuming it disables default styles

2. Which Tailwind config option is used to add new colors without removing default ones?

easy

A. extend

B. replace

C. override

D. reset

Solution

1. Step 1: Recall Tailwind config options

   The extend option allows adding new styles while keeping defaults.

2. Step 2: Match the option to the description

   Only extend adds new colors without removing default ones.

3. Final Answer:

   extend -> Option A

4. Quick Check:

   Adding new styles without losing defaults = extend [OK]

Hint: Use extend to add styles without losing defaults [OK]

Common Mistakes:

• Choosing override which replaces all defaults
• Confusing replace with extend
• Thinking reset adds new styles

3. Given this Tailwind config snippet, what color will bg-primary apply?

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

medium

A. No color applied

B. #000000

C. #1DA1F2

D. #FFFFFF

Solution

1. Step 1: Check the extended colors in config

   The config adds a new color named primary with value #1DA1F2.

2. Step 2: Understand Tailwind class usage

   The class bg-primary uses the primary color defined in the config.

3. Final Answer:

   #1DA1F2 -> Option C

4. Quick Check:

   bg-primary color = #1DA1F2 [OK]

Hint: bg-primary uses extended primary color value [OK]

Common Mistakes:

• Assuming default black or white color
• Thinking extend removes default colors
• Believing no color applies without full override

4. What is wrong with this Tailwind config if you want to add a new font but keep defaults?

{
  theme: {
    fontFamily: {
      custom: ['Comic Sans MS', 'cursive']
    }
  }
}

medium

A. The config is missing the colors section.

B. It overwrites default fonts instead of extending them.

C. The font names are invalid and cause errors.

D. The extend option is used incorrectly.

Solution

1. Step 1: Analyze the config structure

   The config sets fontFamily directly, replacing all default fonts.

2. Step 2: Identify correct way to add fonts

   To keep defaults and add new fonts, use extend inside theme.

3. Final Answer:

   It overwrites default fonts instead of extending them. -> Option B

4. Quick Check:

   Direct fontFamily replaces defaults, need extend [OK]

Hint: Use extend to add fonts without losing defaults [OK]

Common Mistakes:

• Thinking font names cause errors
• Believing colors section is required here
• Confusing extend usage

5. You want to add a new spacing size called 72 with value 18rem but keep all default spacing sizes. Which config snippet correctly does this?

hard

A. { theme: { spacing: { 72: '18rem' } } }

B. { spacing: { 72: '18rem' }, extend: {} }

C. { extend: { spacing: { 72: '18rem' } } }

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

Solution

1. Step 1: Understand how to add new spacing sizes

   Adding new sizes without removing defaults requires using extend inside theme.

2. Step 2: Evaluate each config snippet

   { theme: { extend: { spacing: { 72: '18rem' } } } } correctly uses theme.extend.spacing to add 72: '18rem' while keeping defaults.

3. Final Answer:

   { theme: { extend: { spacing: { 72: '18rem' } } } } -> Option D

4. Quick Check:

   Use theme.extend to add spacing without losing defaults [OK]

Hint: Add new sizes inside theme.extend to keep defaults [OK]

Common Mistakes:

• Overwriting spacing and losing defaults
• Placing extend outside theme
• Using empty extend with spacing outside