tailwindcss/docs/source/display.md

extends	title
_layouts.master	Display

Display

If you're looking for flexbox utilities, see the flexbox page.

The display utilities simply display property helpers.

<!-- Using the utilities in HTML: -->

<div class="block"></div>
<div class="inline-block"></div>
<div class="hidden"></div>

<div class="table">
    <div class="table-row">
        <div class="table-cell"></div>
    </div>
</div>

// Using the utilities in Less:

div {
  .block;
  .inline-block;
  .table;
  .table-row;
  .table-cell;
  .hidden;
}

Responsive

The display utitlies can also be used with responsive prefixes:

<!-- Using the utilities in HTML: -->

<div class="block sm:inline-block md:block lg:hidden"></div>

// Using the utilities in Less:

div {
  .screen(lg, {
    .inline-block;
  });
}