Padding

Set physical inner spacing on every side, an axis, or an individual edge.

Use padding to create room between an element’s content and its border. Choose all sides, a physical axis, or a single edge.

Quick reference

Example class	Expected declarations
`p-4`	`padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem;`
`px-8`	`padding-left: 2rem; padding-right: 2rem;`
`py-2`	`padding-top: 0.5rem; padding-bottom: 0.5rem;`
`pt-2`	`padding-top: 0.5rem;`
`pr-4`	`padding-right: 1rem;`
`pb-6`	`padding-bottom: 1.5rem;`
`pl-8`	`padding-left: 2rem;`

Example setup

These examples explicitly use spacingUnit: "0.25rem", reset: "none", strict mode and no breakpoints. p-4 emits 1rem on each side; px-8 emits 2rem on the left and right. No Tailwind spacing scale or theme is inherited. The colored area and dashed content guide use authored wind-demo scaffold CSS, shown with each preview.

Examples in use

Add room on every side

p-4 leaves 1rem between the content guide and each border.

Add room on every side

HTML

<div class="wind-demo wind-demo-cell p-4">
  <div class="wind-demo-content">p-4 · 1rem</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.p-4 {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "p-4"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

Set horizontal and vertical padding

px-8 adds 2rem on the left and right; py-2 adds 0.5rem on the top and bottom.

Set horizontal and vertical padding

HTML

<div class="wind-demo wind-demo-cell px-8 py-2">
  <div class="wind-demo-content">px-8 py-2 · 2rem / 0.5rem</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "px-8",
        "py-2"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

Set individual edges

Use pt, pr, pb and pl to control the four physical sides independently.

Set individual edges

HTML

<div class="wind-demo wind-demo-cell pt-2 pr-4 pb-6 pl-8">
  <div class="wind-demo-content">pt-2 pr-4 pb-6 pl-8 · 0.5 / 1 / 1.5 / 2rem</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-2 {
  padding-top: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "pt-2",
        "pr-4",
        "pb-6",
        "pl-8"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

Name reusable inner spacing

The example explicitly configures tokens.spacing.card to 1.5rem.

Name reusable inner spacing

HTML

<div class="wind-demo wind-demo-cell p-card">
  <div class="wind-demo-content">p-card · 1.5rem</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-card: 1.5rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.p-card {
  padding-top: var(--zw-spacing-card);
  padding-right: var(--zw-spacing-card);
  padding-bottom: var(--zw-spacing-card);
  padding-left: var(--zw-spacing-card);
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "card": "1.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "p-card"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

Use a one-off length

p-[18px] emits 18px on all four sides.

Use a one-off length

HTML

<div class="wind-demo wind-demo-cell p-[18px]">
  <div class="wind-demo-content">p-[18px] · 18px</div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}

.wind-demo-content {
  background: #fff;
  border: 1px dashed #849bb3;
}
.p-\[18px\] {
  padding-top: 18px;
  padding-right: 18px;
  padding-bottom: 18px;
  padding-left: 18px;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true,
      "wind-demo-content": true
    },
    "safelist": {
      "docs-preview": [
        "p-[18px]"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }
.wind-demo-content { background: #fff; border: 1px dashed #849bb3; }

Custom and named values

p-0 removes padding and p-px uses 1px without a spacing token. Other numeric suffixes need tokens.spacingUnit. Named values such as p-card need tokens.spacing; arbitrary values such as p-[18px] do not need that scale. The same value forms work for each axis and edge. Padding uses physical sides, not logical start/end directions, and never accepts negative values or auto. Use underscore encoding for spaces in arbitrary calc values.

Related guides: Utility grammar · Variants

Catalog details

p

Field	Value
Catalog identifier	`v1.p`
Class pattern	`p-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"padding-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`padding` (`9`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`padding-top`, `padding-right`, `padding-bottom`, `padding-left`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`padding-top`	`resolved`	`null`
`padding-right`	`resolved`	`null`
`padding-bottom`	`resolved`	`null`
`padding-left`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`p-0`	`padding-top: 0`; `padding-right: 0`; `padding-bottom: 0`; `padding-left: 0`

px

Field	Value
Catalog identifier	`v1.px`
Class pattern	`px-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"padding-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`padding` (`9`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`padding-left`, `padding-right`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`padding-left`	`resolved`	`null`
`padding-right`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`px-0`	`padding-left: 0`; `padding-right: 0`

py

Field	Value
Catalog identifier	`v1.py`
Class pattern	`py-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"padding-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`padding` (`9`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`padding-top`, `padding-bottom`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`padding-top`	`resolved`	`null`
`padding-bottom`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`py-0`	`padding-top: 0`; `padding-bottom: 0`

pb

Field	Value
Catalog identifier	`v1.pb`
Class pattern	`pb-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"padding-bottom","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`padding` (`9`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`padding-bottom`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`padding-bottom`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`pb-0`	`padding-bottom: 0`

pl

Field	Value
Catalog identifier	`v1.pl`
Class pattern	`pl-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"padding-left","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`padding` (`9`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`padding-left`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`padding-left`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`pl-0`	`padding-left: 0`

pr

Field	Value
Catalog identifier	`v1.pr`
Class pattern	`pr-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"padding-right","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`padding` (`9`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`padding-right`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`padding-right`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`pr-0`	`padding-right: 0`

pt

Field	Value
Catalog identifier	`v1.pt`
Class pattern	`pt-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"padding-top","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	`spacing`
Negative-value policy	`forbidden`
Conflict group and rank	`padding` (`9`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`padding-top`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"0"`	`"0"`
`keyword`	`"px"`	`"1px"`

Declaration templates

Property	Value kind	Fixed value
`padding-top`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`pt-0`	`padding-top: 0`

Padding

Quick reference

Examples in use

Add room on every side

Set horizontal and vertical padding

Set individual edges

Name reusable inner spacing

Use a one-off length

Custom and named values

p

Accepted values

Declaration templates

Catalog examples

px

Accepted values

Declaration templates

Catalog examples

py

Accepted values

Declaration templates

Catalog examples

pb

Accepted values

Declaration templates

Catalog examples

pl

Accepted values

Declaration templates

Catalog examples

pr

Accepted values

Declaration templates

Catalog examples

pt

Accepted values

Declaration templates

Catalog examples

Revision History