Creating custom utilities with addUtilities in Tailwind - Performance Optimization Steps

Performance: Creating custom utilities with addUtilities

MEDIUM IMPACT

This affects the CSS bundle size and how quickly styles are applied during page load.

Adding custom CSS utilities for repeated styles

Tailwind

module.exports = {
  plugins: [
    function({ addUtilities, e, theme, variants }) {
      const shadows = theme('boxShadow')
      const utilities = Object.entries(shadows).map(([name, value]) => ({
        [`.${e(`custom-shadow-${name}`)}`]: { 'box-shadow': value }
      }))
      addUtilities(utilities, variants('boxShadow'))
    }
  ]
}

Generates utilities dynamically from existing theme values, avoiding duplication and reducing CSS size.

📈 Performance GainSaves 30-50kb in CSS bundle, improving LCP by 50-100ms

Adding custom CSS utilities for repeated styles

Tailwind

module.exports = {
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.custom-shadow': {
          'box-shadow': '0 4px 6px rgba(0,0,0,0.1)',
        },
        '.custom-shadow-lg': {
          'box-shadow': '0 10px 15px rgba(0,0,0,0.2)',
        },
        '.custom-shadow-xl': {
          'box-shadow': '0 20px 25px rgba(0,0,0,0.3)',
        },
        // ... many more similar utilities
      })
    }
  ]
}

Adding many similar utilities manually bloats the CSS file size and slows down page load.

📉 Performance CostAdds 50-100kb to CSS bundle, increasing LCP by 100-200ms on slow networks

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual many custom utilities	No extra DOM nodes	0 reflows	High paint cost due to large CSS	[X] Bad
Dynamic utilities from theme	No extra DOM nodes	0 reflows	Lower paint cost with smaller CSS	[OK] Good

Rendering Pipeline

Custom utilities added via addUtilities become part of the CSS bundle loaded by the browser. Larger CSS files delay Style Calculation and Paint stages, impacting the time until the page visually stabilizes.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to larger CSS size

Core Web Vital Affected

LCP

This affects the CSS bundle size and how quickly styles are applied during page load.

Optimization Tips

1Avoid manually adding many similar utilities to keep CSS small.

2Generate utilities dynamically from theme values when possible.

3Monitor CSS bundle size to maintain fast Largest Contentful Paint.

Performance Quiz - 3 Questions

What is a main performance risk when adding many custom utilities manually with addUtilities?

A Adding extra DOM nodes to the page

B Increasing CSS bundle size and delaying page load

C Causing JavaScript errors during runtime

D Reducing accessibility of the page

DevTools: Network

How to check: Open DevTools > Network tab, reload page, filter by CSS files, and check the size of the CSS bundle.

What to look for: Look for large CSS file sizes that delay page load and increase LCP.