Positioning

Order

Utilities for controlling the order of flex and grid items.

first
last
none
1
2
3
4
5
6
7
8
9
10
11
12
13
14
-1
-2
-3
-4
-5
-6
-7
-8
-9
-10
-11
-12
-13
-14
-6666
CSS
Customizing
// windi.config.js
export default {
  theme: {
    order: {
      first: '-9999',
      last: '9999',
      none: '0',
      normal: '0',
    },
  },
}

Justify Content

Utilities for controlling how flex and grid items are positioned along a container's main axis.

start
end
center
between
around
evenly
CSS

Justify Items

Utilities for controlling how grid items are aligned along their inline axis.

auto
start
end
center
stretch
CSS

Justify Self

Utilities for controlling how an individual grid item is aligned along its inline axis.

auto
start
end
center
stretch
CSS

Align Content

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

center
start
end
between
around
evenly
CSS

Align Items

Utilities for controlling how flex and grid items are positioned along a container's cross axis.

start
end
center
baseline
stretch
CSS

Align Self

Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.

auto
start
end
center
stretch
CSS

Place Content

Utilities for controlling how content is justified and aligned at the same time.

center
start
end
between
around
evenly
stretch
CSS

Place Items

Utilities for controlling how items are justified and aligned at the same time.

auto
start
end
center
stretch
CSS

Place Self

Utilities for controlling how an individual item is justified and aligned at the same time.

auto
start
end
center
stretch
CSS

Position

Utilities for controlling how an element is positioned in the DOM.

static
fixed
absolute
relative
sticky
CSS

Top / Right / Bottom / Left

Utilities for controlling the placement of positioned elements.

Inset

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

Inset Y

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

Inset X

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

Top

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

Bottom

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

Left

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

Floats

Utilities for controlling the wrapping of content around an element.

right
left
none
CSS

Clear

Utilities for controlling the wrapping of content around an element.

right
left
both
none
CSS

Isolation

Utilities for controlling whether an element should explicitly create a new stacking context. These utilities are especially helpful when used in conjunction with mix-blend-mode and z-index.

isolate
isolation-auto
CSS

Object Fit

Utilities for controlling how a replaced element's content should be resized.

contain
cover
fill
none
scale-down
CSS

Object Position

Utilities for controlling how a replaced element's content should be positioned within its container.

bottom
center
left
left-bottom
left-top
right
right-bottom
right-top
top
CSS
Customizing
// windi.config.js
export default {
  theme: {
    objectPosition: {
      'bottom': 'bottom',
      'center': 'center',
      'left': 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      'right': 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      'top': 'top',
      'center-bottom': 'center bottom',
      'center-top': 'center top',
    },
  },
}

Z-Index

Utilities for controlling the stack order of an element.

auto
0
1
2
3
4
5
10
20
30
40
50
60
-1
-2
-3
-5
CSS
Customizing
// windi.config.js
export default {
  theme: {
    zIndex: {
      first: 10,
      second: 20,
    },
  },
}