utilities/layout/display.md
The block utility generates a block element box, generating line breaks both before and after the element when in the
normal flow.
<PlaygroundWithVariants variant='block' :variants="[]" nested=true fixed='space-y-2 pt-6 pl-12' appended='rounded-md bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400' html=' <div class="{class} rounded-md bg-red-400 w-8 h-8"></div> <div class="{class} rounded-md bg-green-400 w-8 h-8"></div> <div class="{class} rounded-md bg-blue-400 w-8 h-8"></div>' />
The inline-block utility generates a block element box that will be flowed with surrounding content as if it were a
single inline box (behaving much like a replaced element would).
<PlaygroundWithVariants variant='inline-block' :variants="[]" nested=true fixed='space-x-1 pt-12 pl-4 text-xs' appended='rounded-md bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 text-gray-500' html=' <div class="{class} rounded-md bg-red-400 w-8 h-8"></div> <div class="{class} rounded-md bg-green-400 w-8 h-8"></div> <div class="{class} rounded-md bg-blue-400 w-8 h-8"></div> <span class="text-gray-500">...</span>' />
The inline utility generates one or more inline element boxes that do not generate line breaks before or after
themselves. In normal flow, the next element will be on the same line if there is space.
<PlaygroundWithVariants variant='inline' :variants="['inline', 'inline-block']" nested=true fixed='space-x-1 pt-12 pl-2 text-xs text-white' appended='rounded-md bg-teal-500 bg-teal-100 py-2 px-3 bg-red-400 bg-green-400 bg-blue-400 text-gray-500' html=' <div class="{class} rounded-md bg-red-400 py-2 px-3">1</div> <div class="{class} rounded-md bg-green-400 py-2 px-3">2</div> <div class="{class} rounded-md bg-blue-400 py-2 px-3">3</div> <span class="text-gray-500">...</span>' />
The flow-root utility generates a block element box that establishes a new
block formatting context, defining
where the formatting root lies.
| Class | Properties |
|---|---|
| flow-root | display: flow-root; |
<PlaygroundWithVariants variant='flow-root' :variants="[]" nested=true fixed='space-y-2 pt-2' appended='rounded-md bg-teal-500 bg-teal-100 w-8 h-8 m-1 bg-red-400 bg-green-400 bg-blue-400 bg-teal-100' html=' <div class="{class} bg-teal-100 rounded-md"> <div class="m-1 rounded-md bg-red-400 w-8 h-8"></div> </div> <div class="{class} bg-teal-100 rounded-md"> <div class="m-1 rounded-md bg-green-400 w-8 h-8"></div> </div> <div class="{class} bg-teal-100 rounded-md"> <div class="m-1 rounded-md bg-blue-400 w-8 h-8"></div> </div>' />
The contents utilities don't produce a specific box by themselves. They are replaced by their pseudo-box and their
child boxes.
<PlaygroundWithVariants variant='contents' :variants="['block', 'contents']" nested=true fixed='pt-10' appended='flex items-center rounded-md flex-1 bg-teal-500 bg-teal-100 h-6 bg-red-400 bg-yellow-400 bg-green-400 bg-blue-400 bg-indigo-100 w-10 m-1 p-1' html='<div class="flex items-center bg-teal-100 rounded-md p-1"> <div class="flex-1 rounded-md bg-red-400 h-6 m-1"></div> <div class="rounded-md w-10 bg-indigo-100 {class}"> <div class="flex-1 rounded-md bg-yellow-400 h-6 m-1"></div> <div class="flex-1 rounded-md bg-green-400 h-6 m-1"></div> </div> <div class="flex-1 rounded-md bg-blue-400 h-6 m-1"></div> </div>' />
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element
did not exist). All descendant elements also have their display turned off. To have an element take up the space that it
would normally take, but without actually rendering anything, use the visibility property instead.
<PlaygroundWithVariants variant='hidden' :variants="['block', 'hidden']" nested=true fixed='pt-20' appended='flex items-center rounded-md bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1' html='<div class="flex items-center bg-teal-100 rounded-md p-1"> <div class="rounded-md bg-red-400 w-8 h-8 m-1"></div> <div class="{class} rounded-md bg-green-400 w-8 h-8 m-1"></div> <div class="rounded-md bg-blue-400 w-8 h-8 m-1"></div> </div>' />
Utilities for controlling the visibility of an element. The visibility CSS property shows or hides an element without
changing the layout of a document. The property can also hide rows or columns in a <table>.
<PlaygroundWithVariants variant='visible' :variants="['visible', 'invisible']" nested=true fixed='pt-20' appended='flex items-center rounded-md bg-teal-500 bg-teal-100 w-8 h-8 bg-red-400 bg-green-400 bg-blue-400 m-1 p-1' html='<div class="flex items-center bg-teal-100 rounded-md p-1"> <div class="rounded-md bg-red-400 w-8 h-8 m-1"></div> <div class="{class} rounded-md bg-green-400 w-8 h-8 m-1"></div> <div class="rounded-md bg-blue-400 w-8 h-8 m-1"></div> </div>' />
The backface utility sets whether the back face of an element is visible when turned towards the user.
<PlaygroundWithVariants variant='hidden' :variants="['visible', 'hidden']" prefix='backface' nested=true fixed='!block' appended='w-34 h-42 transform hover:rotate-y-180 rotate-y-180 relative preserve-3d transition-all duration-500 absolute z-1 z-2 rounded-lg' html='<div class="transform hover:rotate-y-180 relative preserve-3d transition-all duration-500"> <img src="/assets/card-front.jpg" class="rounded-lg w-34 h-42 absolute {class} z-1" alt="Card Front" /> <img src="/assets/card-back.jpg" class="rounded-lg w-34 h-42 absolute {class} z-2 transform rotate-y-180" alt="Card Back" /> </div>' />
The list-item utility generates a ::marker pseudo-element with the content specified by its
list-style properties (for example a bullet point) together with a
principal box of the specified type for its own contents.
<PlaygroundWithVariants variant='list-item' :variants="['block', 'list-item']" fixed='py-4 px-8 dark:text-white opacity-85' nested=true appended='list-decimal' html="<div class='list-decimal'> <div class='{class}'>One</div> <div class='{class}'>Two</div> <div class='{class}'>Three</div> </div>" />