Why consistent spacing matters in Tailwind - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add consistent padding around the content using Tailwind CSS.

Tailwind

<div class="p-[1] bg-gray-100">
  <p>Hello, world!</p>
</div>

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

A4

B8

C12

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using a very large padding like 12 can make the content look too spaced out.

Using 8 might be too big for small containers.

Using p-4 adds consistent padding of 1rem (16px) around the content, which is a common spacing size in Tailwind.

2fill in blank

medium

Complete the code to add consistent horizontal margin using Tailwind CSS.

Tailwind

<div class="mx-[1] bg-blue-200">
  <p>Content with horizontal margin</p>
</div>

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

A6

B3

C1

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using mx-10 adds too much margin and can break layout.

Using mx-1 might be too small to notice.

The class mx-3 adds horizontal margin of 0.75rem (12px) on both left and right sides, keeping spacing consistent.

3fill in blank

hard

Fix the error in the code to apply consistent vertical padding using Tailwind CSS.

Tailwind

<section class="py-[1] bg-green-100">
  <h2>Section Title</h2>
</section>

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

A5

B0

C3

Dfull

Attempts:

3 left

💡 Hint

Common Mistakes

Using py-full is not a valid Tailwind spacing class.

Using py-0 removes padding, which breaks consistent spacing.

The class py-3 adds vertical padding of 0.75rem (12px) on top and bottom, which is consistent and valid. The option full is invalid in this context.

4fill in blank

hard

Fill both blanks to create a consistent gap between flex items and padding inside the container.

Tailwind

<div class="flex gap-[1] p-[2] bg-yellow-50">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

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

A4

B6

C2

D8

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same value for gap and padding can make spacing feel cramped.

Using very large gap values can push items too far apart.

Using gap-2 adds a small consistent space between flex items, and p-4 adds padding inside the container, keeping spacing balanced.

5fill in blank

hard

Fill all three blanks to create a responsive card with consistent margin, padding, and rounded corners.

Tailwind

<article class="m-[1] p-[2] rounded-[3] bg-white shadow">
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</article>

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

A3

B5

Clg

D4

Attempts:

3 left

💡 Hint

Common Mistakes

Using small margin and large padding can make the card feel cramped.

Using rounded-3 is invalid; rounded sizes use keywords like sm, md, lg.

m-4 adds consistent margin around the card, p-5 adds comfortable padding inside, and rounded-lg gives smooth rounded corners for a modern look.