- Layout
- display
Layout
display
Utilities for controlling the display box type of an element.
| Class | Styles |
|---|---|
block | display: block; |
inline-block | display: inline-block; |
inline | display: inline; |
flex | display: flex; |
inline-flex | display: inline-flex; |
table | display: table; |
inline-table | display: inline-table; |
table-caption | display: table-caption; |
table-cell | display: table-cell; |
table-column | display: table-column; |
table-column-group | display: table-column-group; |
table-footer-group | display: table-footer-group; |
table-header-group | display: table-header-group; |
table-row-group | display: table-row-group; |
table-row | display: table-row; |
flow-root | display: flow-root; |
grid | display: grid; |
inline-grid | display: inline-grid; |
contents | display: contents; |
list-item | display: list-item; |
hidden | display: none; |
Examples
Block & Inline
Use the inline, inline-block, and block utilities to control the flow of text and elements.
When controlling the flow of text, using the CSS property
display: inlinewill cause the text inside the element to wrap normally.
While using the property
display: inline-block
will wrap the element to prevent the text inside from extending beyond its parent.
Lastly, using the property
display: block
will put the element on its own line and fill its parent.
<div> When controlling the flow of text, using the CSS property <span class="inline">display: inline</span> will cause the text inside the element to wrap normally. While using the property <span class="inline-block">display: inline-block</span> will wrap the element to prevent the text inside from extending beyond its parent. Lastly, using the property <span class="block">display: block</span> will put the element on its own line and fill its parent.</div>Flow Root
Use the flow-root utility to create a block-level element with its own block formatting context.
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.
<div class="p-4"> <div class="flow-root ..."> <div class="my-4 ...">Well, let me tell you something, ...</div> </div> <div class="flow-root ..."> <div class="my-4 ...">Sure, go ahead, laugh if you want...</div> </div></div>Flex
Use the flex utility to create a block-level flex container.
<div class="flex items-center"> <img src="path/to/image.jpg"> <div> <strong>Andrew Alfred</strong> <span>Technical advisor</span> </div></div>Inline Flex
Use the inline-flex utility to create an inline flex container that flows with text.
Today I spent most of the day researching ways to take advantage of the fact that bottles can be returned for 10 cents in Michigan, but only 5 cents here.
<p> Today I spent most of the day researching ways to ... <span class="inline-flex items-baseline"> <img src="path/to/image.jpg" alt="" class="mx-1 size-5 self-center rounded-full" /> <span>Kramer</span> </span> keeps telling me there is no way to make it work, that ...</p>Grid
Use the grid utility to create a grid container.
<div class="grid grid-cols-3 grid-rows-3 gap-4"> <!-- ... --></div>Inline Grid
Use the inline-grid utility to create an inline grid container.
<span class="inline-grid grid-cols-3 gap-4"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span><span class="inline-grid grid-cols-3 gap-4"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span>Contents
Use the contents utility to create a "phantom" container whose children act like direct children of the parent.
<div class="flex ..."> <div class="flex-1 ...">01</div> <div class="contents"> <div class="flex-1 ...">02</div> <div class="flex-1 ...">03</div> </div> <div class="flex-1 ...">04</div></div>Table
Use the table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, and table-footer-group utilities to create elements that behave like their respective table elements.
Song
Artist
Year
The Sliding Mr. Bones (Next Stop, Pottersville)
Malcolm Lockyer
1961
Witchy Woman
The Eagles
1972
Shining Star
Earth, Wind, and Fire
1975
<div class="table w-full ..."> <div class="table-header-group ..."> <div class="table-row"> <div class="table-cell text-left ...">Song</div> <div class="table-cell text-left ...">Artist</div> <div class="table-cell text-left ...">Year</div> </div> </div> <div class="table-row-group"> <div class="table-row"> <div class="table-cell ..."> The Sliding Mr. Bones (Next Stop, Pottersville) </div> <div class="table-cell ...">Malcolm Lockyer</div> <div class="table-cell ...">1961</div> </div> <div class="table-row"> <div class="table-cell ...">Witchy Woman</div> <div class="table-cell ...">The Eagles</div> <div class="table-cell ...">1972</div> </div> <div class="table-row"> <div class="table-cell ...">Shining Star</div> <div class="table-cell ...">Earth, Wind, and Fire</div> <div class="table-cell ...">1975</div> </div> </div></div>Hidden
Use the hidden utility to set an element to display: none and remove it from the page layout (compare with invisible from the visibility documentation).
<div class="flex ..."> <div class="hidden ...">01</div> <div>02</div> <div>03</div></div>Responsive design
Prefix a display utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="flex md:inline-flex"> <!-- ... --></div>Learn more about using variants in the variants documentation.
