Custom spacing scale in Tailwind - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a custom spacing scale in Tailwind CSS?

A custom spacing scale in Tailwind CSS is a set of user-defined size values that replace or extend the default spacing sizes for margins, padding, gaps, and other spacing utilities.

beginner

How do you define a custom spacing scale in Tailwind CSS?

You define a custom spacing scale by editing the theme.extend.spacing section in the tailwind.config.js file, adding your own key-value pairs for spacing sizes.

intermediate

Example: What does this spacing scale entry mean? <br>spacing: { '72': '18rem' }

It means you can use 72 as a spacing size in Tailwind classes, and it will apply a size of 18rem (which is 18 times the root font size). For example, p-72 adds padding of 18rem.

intermediate

Why use a custom spacing scale instead of default Tailwind spacing?

Custom spacing scales let you match your design system exactly, keep consistent spacing, and avoid arbitrary values. It helps maintain a clean, scalable, and easy-to-update style.

beginner

How do you apply a custom spacing value in your HTML using Tailwind?

After defining a custom spacing key like 84: '21rem', you use it in classes like m-84 for margin or p-84 for padding. Tailwind replaces it with the defined size.

Where do you add custom spacing values in Tailwind CSS?

A Inside <code>theme.extend.spacing</code> in <code>tailwind.config.js</code>

B In your HTML file inside <code>&lt;style&gt;</code> tags

C In the <code>package.json</code> file

D In the browser DevTools console

Custom spacing values are added inside the theme.extend.spacing section of the tailwind.config.js file to extend Tailwind's default spacing scale.

What unit is commonly used for custom spacing values in Tailwind?

A Rem (root em)

B Degrees (deg)

C Percent (%)

D Pixels (px)

Tailwind spacing values often use rem units because they scale with the root font size, making designs more responsive.

If you add '100': '25rem' to spacing, how do you use it in your HTML?

A <code>p-25rem</code>

B <code>m-100</code>

C <code>spacing-100</code>

D <code>padding-25rem</code>

You use the key name as the class suffix, so m-100 applies margin with the custom spacing value of 25rem.

What happens if you use a spacing class not defined in your custom scale or default Tailwind?

A The spacing doubles automatically

B Tailwind applies a default size

C The browser shows an error

D The class is ignored and no spacing is applied

If a spacing class is not defined, Tailwind does not generate CSS for it, so no spacing is applied.

Why is it better to extend spacing instead of replacing it in Tailwind config?

A Replacing is faster but less flexible

B Extending removes all default spacing

C Extending keeps default sizes and adds yours

D Replacing is required for custom spacing

Extending spacing keeps all default Tailwind spacing sizes and adds your custom ones, giving you more options without losing defaults.

Explain how to create and use a custom spacing scale in Tailwind CSS.

Think about where Tailwind stores its design tokens and how you apply spacing classes.

Why is using a custom spacing scale helpful for consistent web design?

Consider how designers keep their work neat and easy to maintain.