Custom spacing scale in Tailwind - Browser Rendering Trace

Render Flow - Custom spacing scale

Read tailwind.config.js

↓

Parse theme.extend.spacing

↓

Generate CSS classes for spacing

↓

Apply classes in HTML

↓

Browser calculates box model with new spacing

↓

Render updated layout

Tailwind reads the custom spacing scale from the config file, generates new CSS classes, and applies them to elements, changing their spacing visually.

Render Steps - 3 Steps

Code Added:Add div element with class 'p-7 m-9 bg-blue-200'

Before

[ ] (empty page)

→

After

[__________]
[ Custom ]
[  Box   ]
[__________]

The div appears as a blue box with default size but no spacing applied yet.

🔧 Browser Action:Creates DOM node and applies base styles

Code Sample

A blue box with padding and margin using custom spacing values from the Tailwind config.

Tailwind

<div class="p-7 m-9 bg-blue-200">
  Custom spacing example
</div>

Tailwind

/* tailwind.config.js snippet */
module.exports = {
  theme: {
    extend: {
      spacing: {
        '7': '1.75rem',
        '9': '2.25rem'
      }
    }
  }
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see inside the box?

A The box gets a border

B The box background color changes

C The text moves inward with extra space around it

D The box moves down the page

Common Confusions - 2 Topics

Why doesn't my custom spacing value work?

You must add the custom spacing in tailwind.config.js under theme.extend.spacing and restart the build process to generate new classes.

💡 Custom spacing classes only appear after Tailwind rebuilds with updated config (see render_steps 1 and 2).

Why is padding inside the box bigger but margin outside doesn't push other elements?

Margin pushes other elements away, but if no siblings or container edges exist, it looks like empty space around the box.

💡 Margin affects space outside the element boundary; padding affects space inside (render_steps 2 vs 3).

Property Reference

Property	Value Applied	Visual Effect	Common Use
p-7	1.75rem	Adds padding inside element	Increase inner spacing
m-9	2.25rem	Adds margin outside element	Increase outer spacing
Default spacing	varies (e.g., 1rem, 0.5rem)	Standard spacing steps	Quick layout adjustments

Concept Snapshot

Custom spacing scale in Tailwind lets you define new spacing sizes. Add values under theme.extend.spacing in tailwind.config.js. Use classes like p-7 or m-9 to apply padding or margin. Padding adds space inside the element; margin adds space outside. Remember to rebuild Tailwind after changing config to see updates.