---
title: "How Spacing Works in Tailwind CSS"
description: "How Tailwind CSS spacing works under the hood — the --spacing() function and the --spacing variable that drives the entire scale."
canonical_url: "https://carlwang.com/posts/tailwind-spacing"
---

> Index of every page on this site: [llms.txt](https://carlwang.com/llms.txt)

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](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.

```text
--spacing(4)
```

compiles to:

```text
calc(var(--spacing) * 4)
```

## The `--spacing` variable

[https://tailwindcss.com/docs/theme#default-theme-variable-reference](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.

```css
--spacing: 0.25rem;
```

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

## Sitemap

See the full [sitemap](https://carlwang.com/sitemap.md) for all pages.