Positioning

Order

Utilities for controlling the order of flex and grid items.

export default {
  theme: {
    order: {
      first: '-9999',
      last: '9999',
      none: '0',
      normal: '0',
    },
  },
}

</Customizing>

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.

<PlaygroundWithVariants variant='static' :variants="['static', 'fixed', 'absolute', 'relative', 'sticky']" nested=true fixed='relative text-xs' appended='rounded-md clear-both bg-teal-500 bg-teal-100 w-8 h-8 mr-2 bg-red-400 bg-green-400 bg-blue-400 inline-block top-0 left-0' html='<p>In this demo you can control the <code>position</code> property for the green box.</p> <div class="inline-block rounded-md w-8 h-8 bg-red-400 mr-2"></div> <div class="inline-block {class} top-0 left-0 rounded-md bg-green-400 w-8 h-8 mr-2"></div> <div class="inline-block rounded-md w-8 h-8 bg-blue-400"></div> <p class="clear-both">To see the effect of <code>sticky</code> positioning, select the <code>position: sticky</code> option and scroll this container.</p> <p>The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in <code>top</code>), and will then stop scrolling, so it stays visible.</p> <p>The rest of this text is only supplied to make sure the container overflows, so as to enable you to scroll it and see the effect.</p> <hr> <p>Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.</p> ' />

Top / Right / Bottom / Left

Utilities for controlling the placement of positioned elements.

Inset

<PlaygroundWithVariants variant='4' :variants="['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']" prefix='inset' nested=true fixed='relative text-xs text-white w-screen h-full' appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2' html='<div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8">{class}</div>' />

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

</Customizing>

Inset Y

<PlaygroundWithVariants variant='4' :variants="['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']" prefix='inset-y' nested=true fixed='relative text-xs text-white w-screen h-full' appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2' html='<div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8">{class}</div>' />

Inset X

<PlaygroundWithVariants variant='4' :variants="['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']" prefix='inset-x' nested=true fixed='relative text-xs text-white w-screen h-full' appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2' html='<div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8">{class}</div>' />

Top

<PlaygroundWithVariants variant='4' :variants="['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']" prefix='top' nested=true fixed='relative text-xs text-white w-screen h-full' appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2' html='<div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8">{class}</div>' />

Right

<PlaygroundWithVariants variant='4' :variants="['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']" prefix='right' nested=true fixed='relative text-xs text-white w-screen h-full' appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2' html='<div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8">{class}</div>' />

Bottom

<PlaygroundWithVariants variant='4' :variants="['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']" prefix='bottom' nested=true fixed='relative text-xs text-white w-screen h-full' appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2' html='<div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8">{class}</div>' />

Left

<PlaygroundWithVariants variant='4' :variants="['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']" prefix='left' nested=true fixed='relative text-xs text-white' appended='absolute h-8 bg-green-400 rounded-md text-center max-w-24 p-2' html='<div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8">{class}</div>' />

Floats

Utilities for controlling the wrapping of content around an element.

<PlaygroundWithVariants variant='left' :variants="['right', 'left', 'none']" prefix='float' nested=true fixed='text-xs' appended='bg-blue-300 rounded-md p-3 text-white' html='<div class="{class} bg-blue-300 rounded-md p-3 text-white">Float me</div> As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.' />

Clear

Utilities for controlling the wrapping of content around an element.

<PlaygroundWithVariants variant='left' :variants="['right', 'left', 'both', 'none']" prefix='clear' nested=true fixed='text-xs' appended='bg-blue-300 rounded-md p-3 text-white float-left float-right h-24' html='<div class="float-left bg-blue-300 rounded-md p-3 text-white">Left</div> <div class="float-right bg-blue-300 rounded-md p-3 text-white h-24">Right</div> <div class="{class}"> As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. </div>' />

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',
    },
  },
}

</Customizing>

Z-Index

Utilities for controlling the stack order of an element.

<PlaygroundWithVariants variant='auto' :variants="['auto', '0', '1', '2', '3', '4', '5', '10', '20', '30', '40', '50', '60', '-1', '-2', '-3', '-5']" fixed='relative text-xs text-white text-center' prefix='z' appended='z-50 flex flex-col justify-center absolute bg-opacity-80 rounded shadow w-8 h-8 w-36 h-36 bg-green-400 bg-blue-400 bg-red-400 z-30 z-10 z-auto top-0 left-0 top-4 left-4 top-8 top-16 top-20 top-24 left-8 ring' nested=true html='<div class="flex flex-col justify-center ring rounded shadow-lg bg-opacity-80 absolute {class} w-36 h-36 bg-green-400 top-0 left-0">Change my z-index</div> <div class="ring rounded shadow-lg bg-opacity-80 absolute w-8 h-8 z-50 top-0 left-0 bg-blue-400">z-50</div> <div class="ring rounded shadow-lg bg-opacity-80 absolute w-8 h-8 z-30 top-4 left-4 bg-blue-400">z-30</div> <div class="ring rounded shadow-lg bg-opacity-80 absolute w-8 h-8 z-10 top-8 left-8 bg-blue-400">z-10</div> <div class="ring rounded shadow-lg bg-opacity-80 absolute w-8 h-8 z-auto top-16 left-0 bg-red-400">z-auto</div> <div class="ring rounded shadow-lg bg-opacity-80 absolute w-8 h-8 z-auto top-20 left-4 bg-red-400">z-auto</div> <div class="ring rounded shadow-lg bg-opacity-80 absolute w-8 h-8 z-auto top-24 left-8 bg-red-400">z-auto</div>' />

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

</Customizing>