Positioning #

Order #

Utilities for controlling the order of flex and grid items.

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.

Justify Items #

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

Justify Self #

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

Align Content #

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

Align Items #

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

Align Self #

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

Place Content #

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

Place Items #

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

Place Self #

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

Position #

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

Top / Right / Bottom / Left #

Utilities for controlling the placement of positioned elements.

Inset #

export default {
  theme: {
    inset: {
      sm: '1rem',
      lg: '4rem',
    },
  },
}

Inset Y #

Inset X #

Top #

Right #

Bottom #

Left #

Floats #

Utilities for controlling the wrapping of content around an element.

Clear #

Utilities for controlling the wrapping of content around an element.

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.

Object Fit #

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

Object Position #

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

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.

export default {
  theme: {
    zIndex: {
      first: 10,
      second: 20,
    },
  },
}