How Spacing Works in Tailwind CSS

Spacing is one of the most frequently used groups of utility classes in Tailwind CSS. This article looks at how that spacing is implemented under the hood.

The --spacing() function

https://tailwindcss.com/docs/functions-and-directives#spacing-function

--spacing() is the core function Tailwind CSS uses to generate spacing values. It takes a single numeric argument — a multiple of the base spacing unit — and compiles down to a calc() expression that computes the actual length.

--spacing(4) 

compiles to:

calc(var(--spacing) * 4)

The --spacing variable

https://tailwindcss.com/docs/theme#default-theme-variable-reference

--spacing is the core variable that defines the base spacing unit in Tailwind CSS. It defaults to 0.25rem, and you can redefine it to adjust the entire spacing scale.

--spacing: 0.25rem;

Modern browsers use a default root font size of 16px, so the default --spacing value works out to 4px.