Display

@include('_partials.class-table', [ 'rows' => [ [ '.hidden', 'display: none;', "Set the box type of the element to none.", ], [ '.block', 'display: block;', "Set the box type of the element to block.", ], [ '.flow-root', 'display: flow-root;', "Set the box type of the element to flow-root.", ], [ '.inline-block', 'display: inline-block;', "Set the box type of the element to inline-block.", ], [ '.inline', 'display: inline;', "Set the box type of the element to inline.", ], [ '.flex', 'display: flex;', "Set the box type of the element to flex.", ], [ '.inline-flex', 'display: inline-flex;', "Set the box type of the element to inline-flex.", ], [ '.grid', 'display: grid;', "Set the box type of the element to grid.", ], [ '.inline-grid', 'display: inline-grid;', "Set the box type of the element to inline-grid.", ], [ '.table', 'display: table;', "Set the box type of the element to table.", ], [ '.table-caption', 'display: table-caption;', "Set the box type of the element to table-caption.", ], [ '.table-cell', 'display: table-cell;', "Set the box type of the element to table-cell.", ], [ '.table-column', 'display: table-column;', "Set the box type of the element to table-column.", ], [ '.table-column-group', 'display: table-column-group;', "Set the box type of the element to table-column-group.", ], [ '.table-footer-group', 'display: table-footer-group;', "Set the box type of the element to table-footer-group.", ], [ '.table-header-group', 'display: table-header-group;', "Set the box type of the element to table-header-group.", ], [ '.table-row-group', 'display: table-row-group;', "Set the box type of the element to table-row-group.", ], [ '.table-row', 'display: table-row;', "Set the box type of the element to table-row.", ], ] ])

Block

Use .block to create a block-level element.

@component('_partials.code-sample')

@endcomponent

Flow-Root

Use .flow-root to create a block-level element with its own block formatting context.

@component('_partials.code-sample')

@endcomponent

Inline Block

Use .inline-block to create an inline block-level element.

@component('_partials.code-sample')

@endcomponent

Inline

Use .inline to create an inline element.

@component('_partials.code-sample')

@endcomponent

Flex

Use .flex to create a block-level flex container.

@component('_partials.code-sample')

@endcomponent

Inline flex

Use .inline-flex to create an inline flex container.

@component('_partials.code-sample')

@endcomponent

Grid

Use .grid to create a grid container.

@component('_partials.code-sample', ['class' => 'bg-white p-8'])

@slot('code')@endslot @endcomponent

Inline Grid

Use .inline-grid to create an inline grid container.

@component('_partials.code-sample', ['class' => 'bg-white p-8'])

111222@slot('code')111222@endslot @endcomponent

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.

@component('_partials.code-sample')

@endcomponent

Hidden

Use .hidden to set an element to display: none and remove it from the page layout (compare with .invisible from the visibility documentation).

@component('_partials.code-sample')

@endcomponent

Responsive

To control the display property of an element at a specific breakpoint, add a {screen}: prefix to any existing display utility class. For example, use md:inline-flex to apply the inline-flex utility at only medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot @slot('sm')@endslot @slot('md')@endslot @slot('lg')@endslot @slot('xl')@endslot @slot('code')@endslot @endcomponent

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'display', 'property' => 'display', ], 'variants' => [ 'responsive', ], ])