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.