Custom spacing scale in Tailwind - Performance & Optimization

Performance: Custom spacing scale

MEDIUM IMPACT

This affects CSS bundle size and rendering speed by controlling how many custom spacing utilities are generated and used.

Defining spacing utilities for margin and padding in Tailwind CSS

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        '1': '0.25rem',
        '2': '0.5rem',
        '4': '1rem',
        '8': '2rem'
      }
    }
  }
}

Limiting custom spacing values reduces CSS bundle size and speeds up style calculation by generating fewer utility classes.

📈 Performance Gainsaves ~15kb CSS, reduces style calculation time by 75%

Defining spacing utilities for margin and padding in Tailwind CSS

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        '0.5': '0.125rem',
        '1': '0.25rem',
        '1.5': '0.375rem',
        '2': '0.5rem',
        '2.5': '0.625rem',
        '3': '0.75rem',
        '3.5': '0.875rem',
        '4': '1rem',
        '4.5': '1.125rem',
        '5': '1.25rem',
        '5.5': '1.375rem',
        '6': '1.5rem',
        '6.5': '1.625rem',
        '7': '1.75rem',
        '7.5': '1.875rem',
        '8': '2rem',
        '8.5': '2.125rem',
        '9': '2.25rem',
        '9.5': '2.375rem',
        '10': '2.5rem'
      }
    }
  }
}

Defining too many custom spacing values generates a large CSS file with many utility classes, increasing CSS size and slowing down style calculation.

📉 Performance Costadds ~20kb to CSS bundle, increases style calculation time linearly with number of utilities

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large custom spacing scale	No change	No change	Higher due to style recalculation	[X] Bad
Minimal custom spacing scale	No change	No change	Lower style recalculation cost	[OK] Good

Rendering Pipeline

Custom spacing scale affects the CSS generation step, which impacts style calculation and layout stages in the browser rendering pipeline.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to large number of CSS rules

Core Web Vital Affected

LCP

This affects CSS bundle size and rendering speed by controlling how many custom spacing utilities are generated and used.

Optimization Tips

1Keep custom spacing scale minimal to reduce CSS size.

2Avoid defining many similar spacing values to prevent style recalculation overhead.

3Use only essential spacing values needed for your design.

Performance Quiz - 3 Questions

What is the main performance impact of defining many custom spacing values in Tailwind CSS?

A Increases DOM node count

B Increases CSS bundle size and style calculation time

C Causes more JavaScript execution

D Triggers more network requests

DevTools: Performance

How to check: Record a performance profile while loading the page and inspect the 'Style Recalculation' and 'Layout' times.

What to look for: Look for long style recalculation times indicating large CSS size from many spacing utilities.

Practice

1. What is the main purpose of adding a custom spacing scale in Tailwind CSS?

easy

A. To create new spacing sizes beyond the default ones

B. To change the color palette of the project

C. To add new font families

D. To enable JavaScript animations

Solution

1. Step 1: Understand Tailwind spacing scale

   Tailwind provides default spacing sizes, but sometimes you need sizes not included by default.

2. Step 2: Purpose of custom spacing scale

   Adding a custom spacing scale lets you define new spacing values to use in classes like padding or margin.

3. Final Answer:

   To create new spacing sizes beyond the default ones -> Option A

4. Quick Check:

   Custom spacing scale = new spacing sizes [OK]

Hint: Custom spacing adds new size options beyond defaults [OK]

Common Mistakes:

• Confusing spacing scale with colors or fonts
• Thinking it enables animations
• Assuming it changes existing default sizes

2. Which of the following is the correct way to add a custom spacing value of 72 (18rem) in Tailwind config?

easy

A. "extend: { colors: { 72: '18rem' } }" inside tailwind.config.js

B. "spacing: { 72: '18rem' }" at the root of tailwind.config.js

C. "extend: { spacing: { 72: '18rem' } }" inside tailwind.config.js

D. "extend: { fontSize: { 72: '18rem' } }" inside tailwind.config.js

Solution

1. Step 1: Locate correct config property for spacing

   Custom spacing values go inside the extend.spacing object in tailwind.config.js.

2. Step 2: Check syntax correctness

   "extend: { spacing: { 72: '18rem' } }" inside tailwind.config.js correctly places 72: '18rem' inside extend.spacing. Other options put spacing at root or wrong keys like colors or fontSize.

3. Final Answer:

   "extend: { spacing: { 72: '18rem' } }" inside tailwind.config.js -> Option C

4. Quick Check:

   Custom spacing inside extend.spacing [OK]

Hint: Custom spacing must be inside extend.spacing [OK]

Common Mistakes:

• Placing spacing directly at root instead of extend
• Adding spacing under colors or fontSize
• Using incorrect syntax or missing quotes

3. Given this Tailwind config snippet:

{
  extend: {
    spacing: {
      84: '21rem'
    }
  }
}

What will be the padding size applied by the class p-84 in HTML?

medium

A. 8.4rem padding on all sides

B. No padding applied, class invalid

C. 2.1rem padding on all sides

D. 21rem padding on all sides

Solution

1. Step 1: Understand custom spacing value

   The config defines spacing 84 as '21rem', so class p-84 means padding: 21rem.

2. Step 2: Interpret class effect

   Class p-84 applies padding of 21rem on all sides of the element.

3. Final Answer:

   21rem padding on all sides -> Option D

4. Quick Check:

   p-84 = padding 21rem [OK]

Hint: Class p-84 uses spacing 84 value exactly [OK]

Common Mistakes:

• Confusing 84 with 8.4 or 2.1 rem
• Thinking class is invalid without default spacing
• Assuming padding applies only to one side

4. You added this to your tailwind.config.js:

extend: {
  spacing: {
    100: '25rem'
  }
}

But using m-100 in HTML does not apply margin. What is the likely problem?

medium

A. The spacing value '25rem' is invalid

B. You forgot to restart the build process after config change

C. Class name should be m-10 instead of m-100

D. Tailwind does not support custom spacing values

Solution

1. Step 1: Check if config syntax is correct

   The config syntax is correct; 100: '25rem' inside extend.spacing is valid.

2. Step 2: Understand Tailwind build process

   After changing tailwind.config.js, you must restart the build or dev server to apply changes.

3. Final Answer:

   You forgot to restart the build process after config change -> Option B

4. Quick Check:

   Restart build after config update [OK]

Hint: Restart build after config edits to apply changes [OK]

Common Mistakes:

• Assuming spacing value format is wrong
• Using wrong class name syntax
• Thinking Tailwind disallows custom spacing

5. You want to add two custom spacing sizes: 72 (18rem) and 84 (21rem). How should you write the extend.spacing part in tailwind.config.js to use both sizes correctly?

hard

A. { extend: { spacing: { 72: '18rem', 84: '21rem' } } }

B. { extend: { spacing: { '72': 18, '84': 21 } } }

C. { spacing: { 72: '18rem', 84: '21rem' } }

D. { extend: { spacing: [72, 84] } }

Solution

1. Step 1: Correct syntax for multiple custom spacings

   Custom spacing values go inside extend.spacing as key-value pairs with keys as numbers and values as strings with units.

2. Step 2: Analyze incorrect options

   Placing spacing at the root overrides defaults. Using string keys or numeric values without units is invalid. Arrays are not supported for spacing definitions.

3. Final Answer:

   { extend: { spacing: { 72: '18rem', 84: '21rem' } } } -> Option A

4. Quick Check:

   Multiple spacings as key-value pairs in extend.spacing [OK]

Hint: Use object with keys and rem strings inside extend.spacing [OK]

Common Mistakes:

• Using numbers without units for spacing values
• Placing spacing outside extend
• Using arrays instead of objects for spacing