Spacing

Padding

Utilities for controlling an element's padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS
Customizing
// windi.config.js
export default {
  theme: {
    padding: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Padding Y

Utilities for controlling an element's vertical padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding X

Utilities for controlling an element's horizontal padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding Top

Utilities for controlling an element's top padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding Left

Utilities for controlling an element's left padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding Bottom

Utilities for controlling an element's bottom padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Padding Right

Utilities for controlling an element's right padding.

0
px
0.5
1
2
4
8
10
12
14
16
20
24
48
1.5rem
32px
CSS

Margin

Utilities for controlling an element's margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS
Customizing
// windi.config.js
export default {
  theme: {
    margin: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Margin Y

Utilities for controlling an element's vertical margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin X

Utilities for controlling an element's horizontal margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin Top

Utilities for controlling an element's top margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin Left

Utilities for controlling an element's left margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin Bottom

Utilities for controlling an element's bottom margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Margin Right

Utilities for controlling an element's right margin.

0
px
auto
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS

Space Between Y

Utilities for controlling the space between vertical align child elements.

0
px
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS
Customizing
// windi.config.js
export default {
  theme: {
    space: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Space Between Y Reverse

If your elements are in reverse order (using say flex-col-reverse), use the space-y-reverse utilities to ensure the space is added to the correct side of each element.

CSS

Space Between X

Utilities for controlling the space between horizontal align child elements.

0
px
0.5
1
2
4
8
12
14
16
20
24
48
1.5rem
32px
-px
-0.5
-2
-4
-8
-12
-14
-16
-20
-24
-48
-1.5rem
-32px
CSS
Customizing
// windi.config.js
export default {
  theme: {
    space: {
      sm: '8px',
      md: '16px',
      lg: '24px',
      xl: '48px',
    },
  },
}

Space Between X Reverse

If your elements are in reverse order (using say flex-row-reverse), use the space-x-reverse utilities to ensure the space is added to the correct side of each element.

CSS