Custom spacing scale in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a custom spacing value of 18rem named 'xxl' in Tailwind config.

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        'xxl': '[1]'
      }
    }
  }
}

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

A18rem

B1.8rem

C18px

D180rem

Attempts:

3 left

💡 Hint

Common Mistakes

Using '18px' instead of '18rem' which is less scalable.

Using a number without quotes which causes config errors.

The custom spacing value 'xxl' is set to '18rem' to define a large spacing size.

2fill in blank

medium

Complete the code to apply the custom spacing 'xxl' as padding on all sides of a div.

Tailwind

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

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

Axxl

Bxxxl

Cxl

D2xl

Attempts:

3 left

💡 Hint

Common Mistakes

Using '2xl' which is a default spacing, not the custom one.

Using 'xl' which is smaller than 'xxl'.

The class 'p-xxl' applies padding using the custom spacing scale 'xxl' defined in Tailwind config.

3fill in blank

hard

Fix the error in the Tailwind config to correctly add a custom spacing 'xxl' with 18rem.

Tailwind

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

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

A18rem

B"18rem"

C18

D'18rem'

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the value causing syntax errors.

Using a number without units.

Custom spacing values must be strings with quotes, so use '18rem' or "18rem". Without quotes, it causes errors.

4fill in blank

hard

Fill both blanks to create a margin-top and margin-bottom using the custom spacing 'xxl'.

Tailwind

<div class="mt-[1] mb-[2]">Content</div>

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

Axxl

Bxl

C2xl

Dlg

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing different spacing keys causing uneven spacing.

Using default spacing keys instead of the custom one.

Both margin-top (mt) and margin-bottom (mb) use the custom spacing 'xxl' for consistent vertical spacing.

5fill in blank

hard

Fill all three blanks to create a padding-x, padding-y, and margin using custom spacing 'xxl' and default spacing 'lg'.

Tailwind

<div class="px-[1] py-[2] m-[3]">Content</div>

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

Alg

Bxxl

Attempts:

3 left

💡 Hint

Common Mistakes

Using default spacing for padding instead of custom.

Mixing up padding and margin classes.

Padding-x (px) and padding-y (py) use the custom spacing 'xxl' for large padding, while margin (m) uses default 'lg' for moderate spacing.