Custom spacing scale in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Correct syntax to add a custom spacing scale in Tailwind CSS

Which option correctly adds a custom spacing value of 72 equal to 18rem in the Tailwind CSS configuration?

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        // Your custom spacing here
      }
    }
  }
}

A 72: "18rem"

B 72: 18rem

C "72": "18rem"

D "72": 18rem

💡 Hint

Remember that keys in the spacing object should be strings and values should be strings with units.

In Tailwind CSS config, custom spacing keys must be strings and values must be strings with units like 'rem'. Option C uses correct string syntax for both key and value.

🧠 Conceptual

intermediate

Understanding the effect of custom spacing scale

If you add a custom spacing scale "72": "18rem" to your Tailwind config, what will class="p-72" do in your HTML?

A Apply padding of 18rem on all sides

B Apply padding of 72px on all sides

C Apply margin of 18rem on all sides

D Apply padding of 72rem on all sides

💡 Hint

The class p-72 uses the custom spacing value you defined.

The p-72 class applies padding on all sides using the spacing scale key '72'. Since '72' is set to '18rem', padding will be 18rem.

❓ selector

advanced

Custom spacing scale and responsive variants

Given this Tailwind config snippet adding "72": "18rem" to spacing, which class applies a margin of 18rem only on medium screens and larger?

A md:m-72

B margin-md-72

C m-md-72

D m-72

💡 Hint

Tailwind uses prefixes like md: for responsive variants.

The md:m-72 class applies margin 18rem starting at the medium breakpoint. Other options are invalid syntax.

❓ layout

advanced

Using custom spacing scale with Flexbox gap

You added "72": "18rem" to your spacing scale. Which class correctly applies a horizontal gap of 18rem between flex items?

Tailwind

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

A gap-18rem

B gap-72-x

C gap-x-[18rem]

D gap-x-72

💡 Hint

Tailwind uses gap-x- for horizontal gaps with spacing keys.

The class gap-x-72 applies horizontal gap using the spacing scale key '72' which equals 18rem. Option D uses arbitrary values but is not needed here.

❓ accessibility

expert

Accessibility considerations when using large custom spacing

You added a very large custom spacing scale "128": "32rem" and use p-128 on a container. What is a potential accessibility concern?

A Large padding improves readability for all users without any downside

B Excessive padding may cause content to be pushed off screen on small devices, harming usability

C Screen readers will ignore padding, so no accessibility impact

D Large padding automatically triggers high contrast mode for better accessibility

💡 Hint

Think about how very large spacing affects small screens and user experience.

Using very large padding like 32rem can push content outside the visible area on small screens, making it hard to use. This harms accessibility and responsive design.