# Display Utilities
Class | Properties |
|---|---|
| block | display: block; |
| inline-block | display: inline-block; |
| inline | display: inline; |
| flex | display: flex; |
| inline-flex | display: inline-flex; |
| 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; |
| flow-root | display: flow-root; |
| grid | display: grid; |
| inline-grid | display: inline-grid; |
| contents | display: contents; |
| list-item | display: list-item; |
| hidden | display: none; |
# Block
Use block to create a block-level element.
<template preview>
<div class="p-4 space-y-4 bg-light-blue-300 bg-stripes bg-stripes-white rounded-md">
<span class="block rounded-md text-white font-extrabold text-center bg-light-blue-500 p-6">1</span>
<span class="block rounded-md text-white font-extrabold text-center bg-light-blue-500 p-6">2</span>
<span class="block rounded-md text-white font-extrabold text-center bg-light-blue-500 p-6">3</span>
</div>
</template>
<div class="space-y-4 ...">
<span class="**block** ...">1</span>
<span class="**block** ...">2</span>
<span class="**block** ...">3</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Flow-Root
Use flow-root to create a block-level element with its own block formatting context (opens new window).
<template preview>
<div class="space-y-4">
<div class="flow-root bg-purple-300 bg-stripes bg-stripes-white rounded-md">
<div class="my-4 text-white font-extrabold text-center bg-purple-500 p-6">1</div>
</div>
<div class="flow-root bg-purple-300 bg-stripes bg-stripes-white rounded-md">
<div class="my-4 text-white font-extrabold text-center bg-purple-500 p-6">2</div>
</div>
</div>
</template>
<div class="space-y-4">
<div class="**flow-root** ...">
<div class="my-4 ...">1</div>
</div>
<div class="**flow-root** ...">
<div class="my-4 ...">2</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Inline Block
Use inline-block to create an inline block-level element.
<template preview>
<div class="p-4 space-x-4 bg-rose-300 bg-stripes bg-stripes-white rounded-md">
<div class="inline-block rounded-md text-white font-extrabold text-center bg-rose-500 px-6 py-4">1</div>
<div class="inline-block rounded-md text-white font-extrabold text-center bg-rose-500 px-6 py-4">2</div>
<div class="inline-block rounded-md text-white font-extrabold text-center bg-rose-500 px-6 py-4">3</div>
</div>
</template>
<div class="space-x-4 ...">
<div class="**inline-block** ...">1</div>
<div class="**inline-block** ...">2</div>
<div class="**inline-block** ...">3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Inline
Use inline to create an inline element.
<template preview>
<div class="bg-amber-300 bg-stripes bg-stripes-white rounded-md space-x-3">
<div class="inline rounded-md text-white font-extrabold text-center bg-amber-500 px-6 py-4">1</div>
<div class="inline rounded-md text-white font-extrabold text-center bg-amber-500 px-6 py-4">2</div>
<div class="inline rounded-md text-white font-extrabold text-center bg-amber-500 px-6 py-4">3</div>
</div>
</template>
<div>
<div class="inline ...">1</div>
<div class="inline ...">2</div>
<div class="inline ...">3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Flex
Use flex to create a block-level flex container.
<template preview>
<div class="p-4 flex space-x-4 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
<div class="flex-1 rounded-md text-white font-extrabold text-center bg-emerald-500 p-6">1</div>
<div class="flex-1 rounded-md text-white font-extrabold text-center bg-emerald-500 p-6">2</div>
<div class="flex-1 rounded-md text-white font-extrabold text-center bg-emerald-500 p-6">3</div>
</div>
</template>
<div class="**flex** space-x-4 ...">
<div class="flex-1 ...">1</div>
<div class="flex-1 ...">2</div>
<div class="flex-1 ...">3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Inline Flex
Use inline-flex to create an inline flex container.
<template preview>
<div class="p-4 inline-flex space-x-4 bg-indigo-300 bg-stripes bg-stripes-white rounded-md">
<div class="flex-1 rounded-md text-white font-extrabold text-center bg-indigo-500 px-6 py-4">1</div>
<div class="flex-1 rounded-md text-white font-extrabold text-center bg-indigo-500 px-6 py-4">2</div>
<div class="flex-1 rounded-md text-white font-extrabold text-center bg-indigo-500 px-6 py-4">3</div>
</div>
</template>
<div class="**inline-flex** space-x-4 ...">
<div class="flex-1 ...">1</div>
<div class="flex-1 ...">2</div>
<div class="flex-1 ...">3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Grid
Use grid to create a grid container.
<template preview>
<div class="p-4 grid gap-4 grid-cols-3 bg-fuchsia-300 bg-stripes bg-stripes-white rounded-md">
<div class="bg-fuchsia-400 rounded-md h-12"></div>
<div class="bg-fuchsia-500 rounded-md h-12"></div>
<div class="bg-fuchsia-400 rounded-md h-12"></div>
<div class="bg-fuchsia-500 rounded-md h-12"></div>
<div class="bg-fuchsia-400 rounded-md h-12"></div>
<div class="bg-fuchsia-500 rounded-md h-12"></div>
<div class="bg-fuchsia-400 rounded-md h-12"></div>
<div class="bg-fuchsia-500 rounded-md h-12"></div>
<div class="bg-fuchsia-400 rounded-md h-12"></div>
</div>
</template>
<div class="**grid** gap-4 grid-cols-3">
<!-- ... -->
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Inline Grid
Use inline-grid to create an inline grid container.
<template preview class="p-10 space-x-3">
<span class="inline-grid grid-cols-3 gap-x-4 p-4 bg-light-blue-300 bg-stripes bg-stripes-white rounded-md">
<span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">1</span>
<span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">1</span>
<span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">1</span>
</span>
<span class="inline-grid grid-cols-3 gap-x-4 p-4 bg-light-blue-300 bg-stripes bg-stripes-white rounded-md">
<span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">2</span>
<span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">2</span>
<span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">2</span>
</span>
</template>
<span class="**inline-grid** grid-cols-3 gap-x-4">
<span>1</span>
<span>1</span>
<span>1</span>
</span>
<span class="**inline-grid** grid-cols-3 gap-x-4">
<span>2</span>
<span>2</span>
<span>2</span>
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Contents
Use contents to create a "phantom" container whose children act like direct children of the parent..
<template preview>
<div class="flex bg-purple-300 bg-stripes bg-stripes-white rounded-md">
<div class="flex-1 rounded-md m-2 text-white font-extrabold text-center bg-purple-500 px-6 py-4">1</div>
<div class="contents">
<div class="flex-1 rounded-md m-2 text-white font-extrabold text-center bg-purple-500 px-6 py-4">2</div>
<div class="flex-1 rounded-md m-2 text-white font-extrabold text-center bg-purple-500 px-6 py-4">3</div>
</div>
<div class="flex-1 rounded-md m-2 text-white font-extrabold text-center bg-purple-500 px-6 py-4">4</div>
</div>
</template>
<div class="flex ...">
<div class="flex-1 ...">1</div>
<div class="contents">
<div class="flex-1 ...">2</div>
<div class="flex-1 ...">3</div>
</div>
<div class="flex-1 ...">4</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 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.
<template preview>
<div class="table w-full bg-rose-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
<div class="table-row-group">
<div class="table-row">
<div class="table-cell text-white font-extrabold text-center bg-rose-500 px-6 py-4">
A cell with more content
</div>
<div class="table-cell text-white font-extrabold text-center bg-rose-400 px-6 py-4">Cell 2</div>
<div class="table-cell text-white font-extrabold text-center bg-rose-500 px-6 py-4">Cell 3</div>
</div>
<div class="table-row">
<div class="table-cell text-white font-extrabold text-center bg-rose-400 px-6 py-4">Cell 4</div>
<div class="table-cell text-white font-extrabold text-center bg-rose-500 px-6 py-4">
A cell with more content
</div>
<div class="table-cell text-white font-extrabold text-center bg-rose-400 px-6 py-4">Cell 6</div>
</div>
</div>
</div>
</template>
<div class="**table** w-full ...">
<div class="**table-row-group**">
<div class="**table-row**">
<div class="**table-cell** ...">A cell with more content</div>
<div class="**table-cell** ...">Cell 2</div>
<div class="**table-cell** ...">Cell 3</div>
</div>
<div class="**table-row**">
<div class="**table-cell** ...">Cell 4</div>
<div class="**table-cell** ...">A cell with more content</div>
<div class="**table-cell** ...">Cell 6</div>
</div>
</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# Hidden
Use hidden to set an element to display: none and remove it from the page layout (compare with .invisible from the visibility documentation).
<template preview>
<div class="p-4 flex space-x-4 bg-amber-300 bg-stripes bg-stripes-white rounded-md">
<div class="hidden text-white rounded-md font-extrabold text-center bg-amber-500 px-6 py-4" hidden>1</div>
<div class="text-white rounded-md font-extrabold text-center bg-amber-500 px-6 py-4">2</div>
<div class="text-white rounded-md font-extrabold text-center bg-amber-500 px-6 py-4">3</div>
</div>
</template>
<div class="flex ...">
<div class="**hidden** ...">1</div>
<div>2</div>
<div>3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 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.
<div class="flex **md:inline-flex** ...">
<!-- ... -->
</div>
1
2
3
2
3
← Box Sizing Floats →