Padding utilities in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Tailwind CSS class p-4 do?

It adds padding of 1rem (16px) on all four sides of an element. The number 4 corresponds to Tailwind's spacing scale.

beginner

How do you add padding only to the left side of an element in Tailwind CSS?

Use the class pl-{size}, for example pl-6 adds padding-left of 1.5rem.

beginner

What is the difference between px-3 and py-3 in Tailwind CSS?

px-3 adds horizontal padding (left and right), while py-3 adds vertical padding (top and bottom).

beginner

How can you remove all padding from an element using Tailwind CSS?

Use the class p-0 to set padding on all sides to zero.

beginner

What unit does Tailwind CSS use for padding sizes like p-4?

Tailwind uses rem units based on a default root font size of 16px. For example, p-4 equals 1rem or 16px.

Which Tailwind class adds padding only to the top of an element?

A pb-5

B pl-5

C p-5

D pt-5

pt-5 adds padding-top. pl-5 is padding-left, p-5 is padding all sides, pb-5 is padding-bottom.

What does py-2 do in Tailwind CSS?

A Adds padding left and right

B Adds padding top and bottom

C Adds padding on all sides

D Removes padding

py-2 adds vertical padding: top and bottom.

If you want no padding on an element, which class should you use?

A p-0

B p-none

C p-remove

D p-empty

p-0 sets padding to zero on all sides.

Which class adds horizontal padding of 0.75rem (12px) in Tailwind?

A px-3

B px-4

C py-3

D p-3

px-3 adds padding-left and padding-right of 0.75rem.

What unit does Tailwind use for padding sizes like p-6?

A Pixels

B Percentages

C Rem units

D Em units

Tailwind uses rem units based on the root font size (usually 16px).

Explain how to add different padding sizes to each side of an element using Tailwind CSS.

Think about how you control padding side by side.

Describe how Tailwind's padding scale relates to actual spacing in the browser.

Consider how Tailwind converts class numbers to real sizes.