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.