tailwindcss/docs/source/display.md
2017-08-03 13:24:05 -04:00

912 B

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;
  });
}