Tailwind CSS Display
The tailwind display utility class allows you to control the display behavior of elements.
Tailwind Display
The tailwind display utility class allows you to control the display behavior of elements. With Tailwind's display class, you can easily modify how elements are rendered and positioned within the document flow.
Applying Tailwind Display
To apply a specific tailwind display behavior to an element, you can use the display-{value}
utility class, where {value}
represents the desired display behavior. Here are the common values you can use:
display-block
: Renders the element as a block-level element, taking up the entire width of its parent container.display-inline
: Renders the element as an inline-level element, allowing other elements to flow around it.display-inline-block
: Renders the element as an inline-level block, allowing other elements to flow around it while also respecting its width and height.display-hidden
: Hides the element from the layout, making it effectively invisible and not taking up any space. Here's an example:
<div> <p class="block">A</p> <p class="block">B</p> <p class="block">C</p> <p class="block">D</p></div>
Preview
A
B
C
D
Responsive Tailwind Display
Tailwind CSS allows you to apply display classes responsively at different breakpoints. To use responsive tailwind display classes, you can append the breakpoint prefix to the utility class. For example, md:display-inline
sets the display behavior to inline starting from the medium breakpoint and above.
<div class="display-inline md:display-block"> This element is initially rendered as an inline-level element, but starting from the medium breakpoint and above, it becomes a block-level element.</div>
In the above example, the display behavior of the <div>
element is set to inline by default (display-inline)
, but starting from the medium breakpoint and above, it changes to block-level (md:display-block)
.
Tailwind Display Class Table
Class | Properties |
---|---|
block | display: block; |
inline-block | display: inline-block; |
inline | display: inline; |
flex | display: flex; |
inline-flex | display: flex; |
table | display: 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; |
hidden | display: none; |
Windframe Tailwind blocks
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs