Configuration file structure in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the correct way to extend colors in Tailwind config

Which option correctly extends the default Tailwind colors with a custom blue shade in tailwind.config.js?

A module.exports = { theme: { extend: { colors: { blue: '#1E40AF' } } } }

B module.exports = { extend: { theme: { colors: { blue: '#1E40AF' } } } }

C module.exports = { theme: { colors: { extend: { blue: '#1E40AF' } } } }

D module.exports = { theme: { extend: { blue: { colors: '#1E40AF' } } } }

💡 Hint

Remember that extend is a key inside theme to add or override values.

Option A correctly places extend inside theme and adds a new color under colors. Other options misplace keys or structure.

🧠 Conceptual

intermediate

Understanding the purpose of the content key in Tailwind config

What is the main role of the content array in the tailwind.config.js file?

A It lists the plugins to be used by Tailwind.

B It defines the colors and fonts used in the project.

C It tells Tailwind which files to scan for class names to generate CSS.

D It specifies the output folder for the compiled CSS files.

💡 Hint

Think about how Tailwind knows which styles to include in the final CSS.

The content key lists file paths where Tailwind looks for class names. This helps Tailwind generate only the CSS that is actually used, keeping the file size small.

❓ selector

advanced

Which Tailwind config snippet correctly adds a custom font family?

Select the option that properly adds a custom font family named heading with the value 'Georgia', serif in the Tailwind config.

A module.exports = { theme: { fontFamily: { extend: { heading: ['Georgia', 'serif'] } } } }

B module.exports = { theme: { extend: { fontFamily: { heading: ['Georgia', 'serif'] } } } }

C module.exports = { extend: { theme: { fontFamily: { heading: ['Georgia', 'serif'] } } } }

D module.exports = { theme: { extend: { fontFamily: { 'heading': 'Georgia, serif' } } } }

💡 Hint

Remember the structure: theme then extend then the property to add or override.

Option B correctly uses an array for the font family value and places extend inside theme. Option B uses a string instead of an array, which is incorrect.

❓ layout

advanced

How to configure Tailwind to add a custom grid template column layout?

Which option correctly adds a custom grid template column named sidebar-main with columns 250px 1fr in the Tailwind config?

A module.exports = { theme: { gridTemplateColumns: { extend: { 'sidebar-main': '250px 1fr' } } } }

B module.exports = { extend: { theme: { gridTemplateColumns: { 'sidebar-main': '250px 1fr' } } } }

C module.exports = { theme: { extend: { gridTemplateColumns: { sidebarMain: '250px 1fr' } } } }

D module.exports = { theme: { extend: { gridTemplateColumns: { 'sidebar-main': '250px 1fr' } } } }

💡 Hint

Check the correct nesting and the exact key names including quotes and casing.

Option D correctly places extend inside theme and uses the exact key 'sidebar-main'. Option D uses camelCase instead of kebab-case, which Tailwind expects as string keys.

❓ accessibility

expert

How to configure Tailwind to support dark mode using class strategy?

Which Tailwind config snippet correctly enables dark mode using the class strategy?

A module.exports = { darkMode: 'class', theme: { extend: {} } }

B module.exports = { darkMode: true, theme: { extend: {} } }

C module.exports = { darkMode: 'media', theme: { extend: {} } }

D module.exports = { darkMode: false, theme: { extend: {} } }

💡 Hint

Dark mode can be triggered by a CSS media query or by a class on the root element.

Option A sets darkMode to 'class', which means dark styles apply when a dark class is present on an element. Option A uses 'media' which triggers dark mode based on system settings, not class.

Practice

1. What is the main purpose of the content array in the Tailwind configuration file?

easy

A. To tell Tailwind which files to scan for class names

B. To define custom colors and fonts

C. To set the default font size for the project

D. To list plugins used by Tailwind

Solution

1. Step 1: Understand the role of content

   The content array lists files where Tailwind looks for class names to generate styles.

2. Step 2: Differentiate from other config parts

   Colors and fonts are set under theme.extend, not content.

3. Final Answer:

   To tell Tailwind which files to scan for class names -> Option A

4. Quick Check:

   content = files to scan [OK]

Hint: Remember: content = files Tailwind scans for classes [OK]

Common Mistakes:

• Confusing content with theme.extend
• Thinking content sets colors or fonts
• Assuming content lists plugins

2. Which of the following is the correct way to extend the color palette in tailwind.config.js?

easy

A. "colors: { extend: { primary: '#123456' } }"

B. "theme: { colors: { primary: '#123456' } }"

C. "extend: { theme: { colors: { primary: '#123456' } } }"

D. "theme: { extend: { colors: { primary: '#123456' } } }"

Solution

1. Step 1: Identify correct nesting for extending theme

   To add or change colors without overwriting defaults, use theme.extend.colors.

2. Step 2: Check each option's structure

   "theme: { extend: { colors: { primary: '#123456' } } }" correctly nests colors inside extend inside theme.

3. Final Answer:

   "theme: { extend: { colors: { primary: '#123456' } } }" -> Option D

4. Quick Check:

   Extend colors inside theme.extend [OK]

Hint: Use theme.extend to add colors, not theme alone [OK]

Common Mistakes:

• Putting colors directly under theme (overwrites defaults)
• Misplacing extend outside theme
• Wrong nesting order

3. Given this tailwind.config.js snippet, what will be the background color class for the custom color?

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1a202c'
      }
    }
  }
}

medium

A. bg-custom-brand

B. background-brand

C. bg-brand

D. brand-bg

Solution

1. Step 1: Understand Tailwind color class naming

   Custom colors added under colors get classes like bg-[colorName] for backgrounds.

2. Step 2: Match color name to class

   The color name is brand, so background class is bg-brand.

3. Final Answer:

   bg-brand -> Option C

4. Quick Check:

   Custom color 'brand' -> class 'bg-brand' [OK]

Hint: Custom colors use bg-[name] for backgrounds [OK]

Common Mistakes:

• Using wrong prefix like background- or brand-bg
• Adding extra words like custom
• Confusing text color with background color classes

4. Identify the error in this Tailwind config snippet:

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      primary: '#ff0000'
    },
    extend: {
      fontFamily: {
        sans: ['Arial', 'sans-serif']
      }
    }
  }
}

medium

A. content array syntax is incorrect

B. Colors should be inside extend, not directly under theme

C. fontFamily should not be inside extend

D. Missing comma after colors object

Solution

1. Step 1: Check placement of colors in config

   Directly placing colors under theme overwrites default colors, usually we extend them inside theme.extend.

2. Step 2: Verify other parts

   Content array syntax is correct, fontFamily can be extended inside extend, commas are properly placed.

3. Final Answer:

   Colors should be inside extend, not directly under theme -> Option B

4. Quick Check:

   Extend colors to avoid overwriting defaults [OK]

Hint: Put colors inside theme.extend to keep defaults [OK]

Common Mistakes:

• Placing colors directly under theme overwrites defaults
• Thinking content syntax is wrong
• Misplacing fontFamily outside extend

5. You want to add a new font family called heading and a custom color accent without removing Tailwind's defaults. Which config structure correctly achieves this?

hard

A. module.exports = {
theme: {
extend: {
fontFamily: { heading: ['Georgia', 'serif'] },
colors: { accent: '#ff6600' }
}
}
}

B. module.exports = {
extend: {
theme: {
fontFamily: { heading: ['Georgia', 'serif'] },
colors: { accent: '#ff6600' }
}
}
}

C. module.exports = {
theme: {
fontFamily: { heading: ['Georgia', 'serif'] },
colors: { accent: '#ff6600' }
}
}

D. module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
fontFamily: { heading: ['Georgia', 'serif'] },
extend: { colors: { accent: '#ff6600' } }
}
}

Solution

1. Step 1: Understand how to add without removing defaults

   To add fonts and colors without removing defaults, place them inside theme.extend.

2. Step 2: Check each option's structure

   module.exports = {
     theme: {
       extend: {
         fontFamily: { heading: ['Georgia', 'serif'] },
         colors: { accent: '#ff6600' }
       }
     }
   }

   correctly puts both fontFamily and colors inside extend under theme.

3. Final Answer:

   module.exports = { theme: { extend: { fontFamily: { heading: ['Georgia', 'serif'] }, colors: { accent: '#ff6600' } } } } -> Option A

4. Quick Check:

   Use theme.extend for adding fonts and colors [OK]

Hint: Always add new styles inside theme.extend to keep defaults [OK]

Common Mistakes:

• Adding new styles directly under theme (overwrites defaults)
• Misplacing extend outside theme
• Splitting fontFamily and colors incorrectly