Spacing

Composite token translated into readily accessible Tailwind components.

Allowed units: px | % | rem | em
Default unit: px
Transform: % will be transform to em

All parameters

Single value

Number of values

Single value

Value example

Generated class

gap-[6px]

Two values

Number of values

Two values

Value example

6 2

Generated class

py-[6px] px-[6px]

Three values

Number of values

Three values

Value example

6 2 4

Generated class

pt-[6px] px-[2px] pb-[4px]

Four values

Number of values

Four values

Value example

6 2 4 8

Generated class

pt-[6px] pr-[2px] pb-[4px] pl-[8px]

Number of values	Value example	Generated class
Single value	6	gap-[6px]
Two values	6 2	py-[6px] px-[6px]
Three values	6 2 4	pt-[6px] px-[2px] pb-[4px]
Four values	6 2 4 8	pt-[6px] pr-[2px] pb-[4px] pl-[8px]

Example

tokens.json

{
  "global": {
    "my-spacing": {
      "value": "1rem 0 8 14",
      "type": "spacing"
    }
  },
  "dark": {
    "my-spacing": {
      "value": "10 50 20",
      "type": "spacing"
    }
  }
}

Usage

page.tsx

<div className="my-spacing bg-sd-my-color w-[100px] h-[50px] rounded-md">
  <Star className="w-[24px] h-[24px] text-sd-primary-foreground"/>
</div>

Render