Control the outer display box of an element: block, inline, flex, grid or none. This family contains 11 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
blockdisplay: block;
inline-blockdisplay: inline-block;
inlinedisplay: inline;
flexdisplay: flex;
inline-flexdisplay: inline-flex;
flow-rootdisplay: flow-root;
griddisplay: grid;
inline-griddisplay: inline-grid;
contentsdisplay: contents;
list-itemdisplay: list-item;
hiddendisplay: none;

Example#

example
html
<div class="hidden md:flex items-center gap-4">
  <!-- hidden on phones, flex from md up -->
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:hidden style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • hidden + a responsive prefix is the canonical show/hide pattern
  • Use flow-root to contain floats without clearfix hacks

Common mistakes#

  • Setting display: flex and wondering why text-align stopped centering (flex alignment is justify/align, not text-align)

utilities/spacing/margin|Margin · utilities/sizing/width|Width · responsive/index|Responsive