What is Custom spacing scale in Tailwind?

Tailwindmarkup~5 mins

Custom spacing scale in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Custom spacing scale lets you create your own sizes for margins, padding, and gaps. This helps keep your design consistent and unique.

You want your website spacing to match your brand style exactly.

You need spacing sizes that Tailwind doesn't have by default.

You want to keep spacing consistent across different parts of your site.

You want to make your code easier to read by using meaningful spacing names.

You want to avoid repeating the same custom values everywhere.

Syntax

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
        '128': '32rem'
      }
    }
  }
}

Put your custom spacing inside the extend.spacing section to add to the default scale.

Use keys as strings for spacing names and values as CSS size units like rem, px, or %.

Examples

Adds a new spacing size named 72 equal to 18rem.

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem'
      }
    }
  }
}

Creates custom spacing names sm, md, and lg with pixel values.

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        'sm': '8px',
        'md': '16px',
        'lg': '24px'
      }
    }
  }
}

Defines a spacing size called half that equals 50% of the parent size.

Tailwind

module.exports = {
  theme: {
    extend: {
      spacing: {
        'half': '50%'
      }
    }
  }
}

Sample Program

This example shows two boxes with very large padding using custom spacing sizes 72 and 84. The spacing is added to Tailwind's default scale using extend.spacing.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Custom Spacing Scale Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          spacing: {
            '72': '18rem',
            '84': '21rem'
          }
        }
      }
    }
  </script>
</head>
<body class="p-8">
  <div class="bg-blue-200 p-72 text-center">
    This box has padding of 18rem (custom spacing 72).
  </div>
  <div class="bg-green-200 mt-8 p-84 text-center">
    This box has padding of 21rem (custom spacing 84).
  </div>
</body>
</html>

OutputSuccess

Important Notes

Always use extend to add spacing so you don't remove Tailwind's default sizes.

You can use any CSS unit like rem, px, %, or em for spacing values.

Use meaningful names for spacing to make your code easier to understand.

Summary

Custom spacing scale lets you add your own spacing sizes to Tailwind.

Put your sizes inside extend.spacing in the Tailwind config.

Use your custom spacing classes like p-72 or m-84 in your HTML.