---
title: "Tailwind CSS间距（Spacing）实现原理 - Carl Wang"
description: "深入理解 Tailwind CSS 间距的实现原理：--spacing() 函数与驱动整个间距体系的 --spacing 变量。"
canonical_url: "https://carlwang.com/zh/posts/tailwind-spacing"
last_updated: "2025-03-26T00:00:00.000Z"
meta:
  "og:description": "深入理解 Tailwind CSS 间距的实现原理：--spacing() 函数与驱动整个间距体系的 --spacing 变量。"
  "og:image": "https://carlwang.com/og-image.png"
  "og:image:alt": "Carl Wang — notes on software, products, and ecommerce."
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "Tailwind CSS间距（Spacing）实现原理 - Carl Wang"
  "twitter:image": "https://carlwang.com/og-image.png"
---

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

[札记](https://carlwang.com/zh/topics/learning)·2025年3月26日

# **Tailwind CSS间距（Spacing）实现原理**

深入理解 Tailwind CSS 间距的实现原理：--spacing() 函数与驱动整个间距体系的 --spacing 变量。

间距（Spacing）是Tailwind CSS中最常用的工具类之一，本文将探讨Tailwind CSS中间距的实现的一些内容。

## `**--spacing()**` 方法

[**https://tailwindcss.com/docs/functions-and-directives#spacing-function**](https://tailwindcss.com/docs/functions-and-directives#spacing-function)

`**--spacing()**`方法是Tailwind CSS中用于生成间距类名的核心方法，它接受一个参数，用于生成不同尺寸的间距类名。参数是一个数字，表示间距的倍数，编译后会生成一个`**calc()**`函数，用于计算间距的实际值。

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

编译后会生成以下：

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

## `**--spacing**` 变量

[**https://tailwindcss.com/docs/theme#default-theme-variable-reference**](https://tailwindcss.com/docs/theme#default-theme-variable-reference)

`**--spacing**` 变量是Tailwind CSS中用于定义间距尺寸的核心变量，它默认值为`**0.25rem**`，可以通过`**--spacing**`变量来定义不同尺寸的间距。

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

现代浏览器默认是 16px，所以 `**--spacing**` 默认值是 4px。

[Tailwind CSS进阶：定制化与扩展](https://carlwang.com/zh/posts/tailwind-advanced-customization) 

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://carlwang.com/zh#website","@type":"WebSite","description":"Carl Wang 关于软件、产品与电子商务的文章与笔记。","inLanguage":"zh-Hans","name":"Carl Wang","url":"https://carlwang.com/zh","publisher":{"@id":"https://carlwang.com/#identity"},"translationOfWork":{"@id":"https://carlwang.com/#website"}},{"@id":"https://carlwang.com/zh/posts/tailwind-spacing#webpage","@type":"WebPage","dateModified":"2025-03-26T00:00:00.000Z","datePublished":"2025-03-26T00:00:00.000Z","description":"深入理解 Tailwind CSS 间距的实现原理：--spacing() 函数与驱动整个间距体系的 --spacing 变量。","name":"Tailwind CSS间距（Spacing）实现原理","url":"https://carlwang.com/zh/posts/tailwind-spacing","breadcrumb":{"@id":"https://carlwang.com/zh/posts/tailwind-spacing#breadcrumb"},"isPartOf":{"@id":"https://carlwang.com/zh#website"},"potentialAction":[{"@type":"ReadAction","target":["https://carlwang.com/zh/posts/tailwind-spacing"]}]},{"@id":"https://carlwang.com/#identity","@type":"Person","name":"Carl Wang","url":"https://carlwang.com","sameAs":["https://x.com/carlwangx","https://github.com/carlwangx"]},{"@id":"https://carlwang.com/zh/posts/tailwind-spacing#article","dateModified":"2025-03-26T00:00:00.000Z","datePublished":"2025-03-26T00:00:00.000Z","description":"深入理解 Tailwind CSS 间距的实现原理：--spacing() 函数与驱动整个间距体系的 --spacing 变量。","headline":"Tailwind CSS间距（Spacing）实现原理","inLanguage":"zh-Hans","thumbnailUrl":"https://carlwang.com/og-image.png","url":"https://carlwang.com/zh/posts/tailwind-spacing","@type":["Article","BlogPosting"],"author":{"@id":"https://carlwang.com/#identity"},"image":{"@id":"https://carlwang.com/#/schema/image/1"},"isPartOf":{"@id":"https://carlwang.com/zh/posts/tailwind-spacing#webpage"},"mainEntityOfPage":{"@id":"https://carlwang.com/zh/posts/tailwind-spacing#webpage"},"publisher":{"@id":"https://carlwang.com/#identity"}},{"@id":"https://carlwang.com/zh/posts/tailwind-spacing#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"首页","item":"https://carlwang.com/zh","position":1},{"@type":"ListItem","name":"札记","item":"https://carlwang.com/zh/topics/learning","position":2},{"@type":"ListItem","name":"Tailwind CSS间距（Spacing）实现原理","position":3}]},{"@id":"https://carlwang.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://carlwang.com/og-image.png","inLanguage":"zh-Hans","url":"https://carlwang.com/og-image.png"}]}
```

## Sitemap

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