Tailwind CSS Display :This class accepts more than one value in tailwind CSS. All the properties are covered as in class form. It is the alternative to the CSS display property.
This class is used to define how the components (div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.
Utilities for controlling the display box type of an element.
| Class | Properties |
|---|---|
| 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; |
Table of Contents
Display Classes
The display classes are listed as follows:
- block: It is utilized to show a component as a block component (element).
- inline-block: It is utilized to show an element as an inline-level block holder(container).
- inline: It is utilized to show an element as an inline element.
- flex: It is utilized to show an element as a block-level flex holder.
- inline-flex: It is utilized to show an element as an inline-level flex holder.
- table: It is utilized to set the conduct as <table> for all components.
- flow-root: It is utilized to set the default value.
- grid: It is utilized to show an element as a block-level grid container.
- inline-grid: It is utilized to show a component as an inline-level grid container.
- contents: It is utilized to vanish the container.
- hidden: It is utilized to eliminate the element.
- block: It is utilized to show an element as a block-level element. It is a default property of div. This class puts the div consistently in an upward direction. The height and width of the div can be changed utilizing the block class on the off chance that the width isn’t referenced, then, at that point, the div under block class will take up the width of the container.
- table-caption: It is utilized to set the conduct as <caption> for all components.
- table-cell: It is utilized to set the conduct as <td> for all components.
- table-column: It is utilized to set the conduct as <col> for all components.
- table-column-group: It is utilized to set the conduct as <column> for all components.
- table-footer-group: It is utilized to set the conduct as <footer> for all components.
- table-header-group: It is utilized to set the conduct as <header> for all components.
- table-row-group: It is utilized to set the conduct as <row> for all components.
- table-row: It is utilized to set the conduct as <tr> for all components.
Block & Inline
Use inline, inline-block, and block to control the flow of text and elements.
When controlling the flow of text, using the CSS property display: inline will 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 it’s own line and fill its parent.
.inline-block
inline-block: It is used to display an element as an inline-level block container. This feature uses both properties mentioned above, block and inline. So, this class aligns the div inline but the difference is it can edit the height and the width of the block. Basically, this will align the div both in the block and inline fashion.
Syntax:
<element display="inline-block">...</element>
Example:
Hidden
Use hidden to set an element to display: none and remove it from the page layout (compare with .invisible from the visibility documentation).
