Configuration file structure in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define the Tailwind configuration file export.

Tailwind

[1] theme: {}, plugins: [] }

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

Aexport default

Bmodule.exports =

Cexport =

Dmodule.exports = {

Attempts:

3 left

💡 Hint

Common Mistakes

Using ES module export syntax like 'export default' instead of CommonJS.

Missing the curly braces around the config object.

The Tailwind config file exports an object using module.exports = { ... } syntax.

2fill in blank

medium

Complete the code to add a custom color named 'brand' in the theme colors.

Tailwind

module.exports = { theme: { colors: { brand: '[1]' } }, plugins: [] }

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

Ared

B#ff0000

Cblue

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names instead of hex codes for custom colors.

Forgetting to put the color value inside quotes.

Custom colors in Tailwind config are defined with hex color codes like '#ff0000'.

3fill in blank

hard

Fix the error in the Tailwind config to correctly extend the theme with new spacing.

Tailwind

module.exports = { theme: { extend: { spacing: { [1]: '72px' } } }, plugins: [] }

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

Apx72

B72

C18

D'72'

Attempts:

3 left

💡 Hint

Common Mistakes

Using the pixel value as the key instead of a number.

Putting the key in quotes which makes it a string.

Spacing keys are numbers or strings without quotes; '18' means 18 units, not '72'.

4fill in blank

hard

Fill both blanks to add a custom font family named 'heading' with fallback fonts.

Tailwind

module.exports = { theme: { extend: { fontFamily: { heading: [[1], [2]] } } }, plugins: [] }

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

A'Poppins'

B'sans-serif'

C'Arial'

D'serif'

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around font names.

Using only one font without fallback.

Custom fonts are strings in an array; first is the font name, second is fallback like 'sans-serif'.

5fill in blank

hard

Fill both blanks to add a plugin and enable dark mode in the config.

Tailwind

module.exports = { darkMode: '[1]', theme: { extend: {} }, plugins: [require('[2]')] }

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

Amedia

Bclass

C@tailwindcss/forms

D@tailwindcss/typography

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'media' for darkMode when 'class' is expected.

Forgetting to require the plugin by its exact name.

Dark mode is often enabled with 'class'; plugins are required by name like '@tailwindcss/forms'.