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.