# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/display.mdx

import dedent from "dedent";
import { ApiTable } from "@/components/api-table.tsx";
import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { Stripes } from "@/components/stripes.tsx";

export const title = "display";
export const description = "Utilities for controlling the display box type of an element.";

<ApiTable
  rows={[
    ["inline", "display: inline;"],
    ["block", "display: block;"],
    ["inline-block", "display: inline-block;"],
    ["flow-root", "display: flow-root;"],
    ["flex", "display: flex;"],
    ["inline-flex", "display: inline-flex;"],
    ["grid", "display: grid;"],
    ["inline-grid", "display: inline-grid;"],
    ["contents", "display: contents;"],
    ["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;"],
    ["list-item", "display: list-item;"],
    ["hidden", "display: none;"],
    [
      "sr-only",
      dedent`
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
      `,
    ],
    [
      "not-sr-only",
      dedent`
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
      `,
    ],
  ]}
/>

## Examples

### Block and Inline

Use the `inline`, `inline-block`, and `block` utilities to control the flow of text and elements:

<Figure>

<Example>
  {
    <div className="mx-auto max-w-xs px-4 text-sm leading-6 text-gray-500 sm:text-base sm:leading-7 dark:text-gray-300">
      When controlling the flow of text, using the CSS property{" "}
      <span className="inline rounded bg-sky-100 font-mono text-sm font-bold text-gray-900 dark:bg-white/15 dark:text-gray-200">
        display: inline
      </span>{" "}
      will cause the text inside the element to wrap normally.
      <br />
      <br />
      While using the property{" "}
      <span className="inline-block rounded bg-sky-100 font-mono text-sm font-bold text-gray-900 dark:bg-white/15 dark:text-gray-200">
        display: inline-block
      </span>{" "}
      will wrap the element to prevent the text inside from extending beyond its parent.
      <br />
      <br />
      Lastly, using the property{" "}
      <span className="block rounded bg-sky-100 font-mono text-sm font-bold text-gray-900 dark:bg-white/15 dark:text-gray-200">
        display: block
      </span>{" "}
      will put the element on its own line and fill its parent.
    </div>
  }
</Example>

```html
<!-- [!code classes:inline,inline-block,block] -->
<p>
  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.
</p>
<p>
  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.
</p>
<p>
  Lastly, using the property <span class="block">display: block</span> will put the element on its own line and fill its
  parent.
</p>
```

</Figure>

### Flow Root

Use the `flow-root` utility to create a block-level element with its own [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context):

<Figure>

<Example padding={false}>
  {
    <div className="mx-auto max-w-xs p-4 text-sm leading-6 text-gray-500 sm:text-base sm:leading-7 dark:text-gray-300">
      <div className="relative mb-0.5 flow-root">
        <div className="absolute inset-x-0">
          <Stripes border className="h-4 w-full" />
        </div>
        <div className="absolute inset-x-0 bottom-0">
          <Stripes border className="h-4" />
        </div>
        <div className="my-4">
          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.
        </div>
      </div>
      <div className="relative mt-0.5 flow-root">
        <div className="absolute inset-x-0">
          <Stripes border className="h-4 w-full" />
        </div>
        <div className="absolute inset-x-0 bottom-0">
          <Stripes border className="h-4" />
        </div>
        <div className="my-4">
          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>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flow-root] -->
<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>
```

</Figure>

### Flex

Use the `flex` utility to create a block-level flex container:

<Figure>

<Example padding={false}>
  {
    <div className="mx-auto flex max-w-xs justify-center p-4 leading-6 text-gray-500 dark:text-gray-400">
      <div className="flex items-center gap-4 p-4">
        <img
          className="h-12 w-12 rounded-full"
          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80"
        />
        <div className="flex flex-col">
          <strong className="font-medium text-gray-900 dark:text-gray-200">Andrew Alfred</strong>
          <span className="font-medium text-gray-500 dark:text-gray-400">Technical advisor</span>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:flex] -->
<div class="flex items-center">
  <img src="path/to/image.jpg" />
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>
```

</Figure>

### Inline Flex

Use the `inline-flex` utility to create an inline flex container that flows with text:

<Figure>

<Example padding={false}>
  {
    <p className="mx-auto max-w-lg p-4 text-sm leading-6 text-gray-500 sm:text-base/7 dark:text-gray-300">
      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.{" "}
      <span className="ml-1 inline-flex items-baseline">
        <img
          src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=80"
          alt=""
          className="mr-1 size-5 self-center rounded-full"
        />
        <span className="font-medium text-gray-900 dark:text-gray-100">Kramer</span>
      </span>{" "}
      keeps telling me there is no way to make it work, that he has run the numbers on every possible approach, but I
      just have to believe there's a way to make it work, there's simply too much opportunity here.
    </p>
  }
</Example>

```html
<!-- [!code classes:inline-flex] -->
<p>
  Today I spent most of the day researching ways to ...
  <span class="inline-flex items-baseline">
    <img src="/img/kramer.jpg" 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>
```

</Figure>

### Grid

Use the `grid` utility to create a grid container:

<Figure>

<Example>
  {
    <div className="relative grid grid-cols-3 grid-rows-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="absolute inset-0">
        <Stripes border className="h-full rounded-lg" />
      </div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">01</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">02</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">03</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">04</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">05</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">06</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">07</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">08</div>
      <div className="relative rounded-lg bg-fuchsia-500 p-4">09</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:grid] -->
<div class="grid grid-cols-3 grid-rows-3 gap-4">
  <!-- ... -->
</div>
```

</Figure>

### Inline Grid

Use the `inline-grid` utility to create an inline grid container:

<Figure>

<Example>
  {
    <div className="w-full space-x-3 overflow-x-auto p-8 whitespace-nowrap">
      <div className="relative inline-grid grid-cols-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">01</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">02</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">03</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">04</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">05</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">06</div>
      </div>
      <div className="relative inline-grid grid-cols-3 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
        <div className="absolute inset-0">
          <Stripes border className="h-full rounded-lg" />
        </div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">01</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">02</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">03</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">04</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">05</div>
        <div className="relative size-14 rounded-lg bg-sky-500 p-4">06</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:inline-grid] -->
<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>
```

</Figure>

### Contents

Use the `contents` utility to create a "phantom" container whose children act like direct children of the parent:

<Figure>

<Example>
  {
    <div className="relative flex gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="absolute inset-0">
        <Stripes border className="h-full rounded-lg" />
      </div>
      <div className="relative flex-1 rounded-lg bg-purple-500 p-4">01</div>
      <div className="relative contents">
        <div className="relative flex-1 rounded-lg bg-purple-500 p-4">02</div>
        <div className="relative flex-1 rounded-lg bg-purple-500 p-4">03</div>
      </div>
      <div className="relative flex-1 rounded-lg bg-purple-500 p-4">04</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:contents] -->
<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>
```

</Figure>

### 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:

<Figure>

<Example padding={false}>
  {
    <div className="my-8 overflow-hidden">
      <div className="table w-full table-auto border-collapse text-sm">
        <div className="table-header-group">
          <div className="table-row">
            <div className="table-cell border-b border-gray-200 p-4 pt-0 pb-3 pl-8 text-left font-medium text-gray-400 dark:border-white/20 dark:text-white">
              Song
            </div>
            <div className="table-cell border-b border-gray-200 p-4 pt-0 pb-3 text-left font-medium text-gray-400 dark:border-white/20 dark:text-white">
              Artist
            </div>
            <div className="table-cell border-b border-gray-200 p-4 pt-0 pr-8 pb-3 text-left font-medium text-gray-400 dark:border-white/20 dark:text-white">
              Year
            </div>
          </div>
        </div>
        <div className="table-row-group dark:bg-black/5">
          <div className="table-row">
            <div className="table-cell border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
              The Sliding Mr. Bones (Next Stop, Pottersville)
            </div>
            <div className="table-cell border-b border-gray-100 p-4 text-gray-500 dark:border-white/10 dark:text-gray-300">
              Malcolm Lockyer
            </div>
            <div className="table-cell border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
              1961
            </div>
          </div>
          <div className="table-row">
            <div className="table-cell border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
              Witchy Woman
            </div>
            <div className="table-cell border-b border-gray-100 p-4 text-gray-500 dark:border-white/10 dark:text-gray-300">
              The Eagles
            </div>
            <div className="table-cell border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-white/10 dark:text-gray-300">
              1972
            </div>
          </div>
          <div className="table-row">
            <div className="table-cell border-b border-gray-100 p-4 pl-8 text-gray-500 dark:border-white/20 dark:text-gray-300">
              Shining Star
            </div>
            <div className="table-cell border-b border-gray-100 p-4 text-gray-500 dark:border-white/20 dark:text-gray-300">
              Earth, Wind, and Fire
            </div>
            <div className="table-cell border-b border-gray-100 p-4 pr-8 text-gray-500 dark:border-white/20 dark:text-gray-300">
              1975
            </div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:table,table-header-group,table-row-group,table-row,table-cell] -->
<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>
```

</Figure>

### Hidden

Use the `hidden` utility to remove an element from the document:

<Figure>

<Example>
  {
    <div className="relative flex gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
      <div className="absolute inset-0">
        <Stripes border className="h-full rounded-lg" />
      </div>
      <div className="hidden h-14 w-14 rounded-lg bg-purple-500 p-4">01</div>
      <div className="relative h-14 w-14 rounded-lg bg-purple-500 p-4">02</div>
      <div className="relative h-14 w-14 rounded-lg bg-purple-500 p-4">03</div>
    </div>
  }
</Example>

```html
<!-- [!code classes:hidden] -->
<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</Figure>

To visually hide an element but keep it in the document, use the [visibility](/docs/visibility#making-elements-invisible) property instead.

### Screen-reader only

Use `sr-only` to hide an element visually without hiding it from screen readers:

```html
<!-- [!code classes:sr-only] -->
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>
```

Use `not-sr-only` to undo `sr-only`, making an element visible to sighted users as well as screen readers:

```html
<!-- [!code classes:sm:not-sr-only] -->
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>
```

This can be useful when you want to visually hide something on small screens but show it on larger screens for example.

### Responsive design

<ResponsiveDesign property="display" defaultClass="flex" featuredClass="inline-flex" />