Layout

display to Tailwind

Every display value Tailwind supports is its own bare utility — the value is the class name, with no display- prefix.

The 28 mappings below are read straight out of Tailwind v4.3.3, not maintained by hand, so this is what the converter will actually produce for display.

display values and their classes

CSS	Tailwind
display: -webkit-box;	line-clamp-1also sets overflow, -webkit-box-orient, -webkit-line-clamp
display: -webkit-box;	line-clamp-2also sets overflow, -webkit-box-orient, -webkit-line-clamp
display: -webkit-box;	line-clamp-3also sets overflow, -webkit-box-orient, -webkit-line-clamp
display: -webkit-box;	line-clamp-4also sets overflow, -webkit-box-orient, -webkit-line-clamp
display: -webkit-box;	line-clamp-5also sets overflow, -webkit-box-orient, -webkit-line-clamp
display: -webkit-box;	line-clamp-6also sets overflow, -webkit-box-orient, -webkit-line-clamp
display: block;	block
display: block;	line-clamp-nonealso sets overflow, -webkit-box-orient, -webkit-line-clamp
display: contents;	contents
display: flex;	flex
display: flow-root;	flow-root
display: grid;	grid
display: inline;	inline
display: inline-block;	inline-block
display: inline-flex;	inline-flex
display: inline-grid;	inline-grid
display: inline-table;	inline-table
display: list-item;	list-item
display: none;	hidden
display: table;	table
display: table-caption;	table-caption
display: table-cell;	table-cell
display: table-column;	table-column
display: table-column-group;	table-column-group
display: table-footer-group;	table-footer-group
display: table-header-group;	table-header-group
display: table-row;	table-row
display: table-row-group;	table-row-group

Other layout properties

Converting a whole stylesheet?

Paste it into the converter and get every rule at once, shorthands expanded, media queries turned into breakpoint variants, and the parts that have no Tailwind equivalent flagged rather than dropped.

Open the converter