Layout

Display

Utilities for controlling the display box type of an element.

Quick reference

Show all classes

Basic usage

Block & Inline

Use inline, inline-block, and block to control the flow of text and elements.

1. <div>
2. When controlling the flow of text, using the CSS property
3. <span class="inline">display: inline</span>
4. will cause the text inside the element to wrap normally.

6. While using the property <span class="inline-block">display: inline-block</span>
7. will wrap the element to prevent the text inside from extending beyond its parent.

9. Lastly, using the property <span class="block">display: block</span>
10. will put the element on its own line and fill its parent.
11. </div>

Flow Root

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

1. <div class="p-4">
2. <div class="flow-root ...">
3. <div class="my-4 ...">Well, let me tell you something, ...</div>
4. </div>
5. <div class="flow-root ...">
6. <div class="my-4 ...">Sure, go ahead, laugh if you want...</div>
7. </div>
8. </div>

Flex

Use flex to create a block-level flex container.

1. <div class="flex items-center">
2. <img src="path/to/image.jpg">
3. <div>
4. <strong>Andrew Alfred</strong>
5. <span>Technical advisor</span>
6. </div>
7. </div>

Inline Flex

Use inline-flex to create an inline flex container that flows with text.

1. <p>
2. Today I spent most of the day researching ways to ...
3. <span class="inline-flex items-baseline">
4. <img src="path/to/image.jpg" alt="" class="self-center w-5 h-5 rounded-full mx-1" />
5. <span>Kramer</span>
6. </span>
7. keeps telling me there is no way to make it work, that ...
8. </p>

Grid

Use grid to create a grid container.

1. <div class="grid gap-4 grid-cols-3 grid-rows-3">
2. <!-- ... -->
3. </div>

Inline Grid

Use inline-grid to create an inline grid container.

1. <span class="inline-grid grid-cols-3 gap-4">
2. <span>01</span>
3. <span>02</span>
4. <span>03</span>
5. <span>04</span>
6. <span>05</span>
7. <span>06</span>
8. </span>
9. <span class="inline-grid grid-cols-3 gap-4">
10. <span>01</span>
11. <span>02</span>
12. <span>03</span>
13. <span>04</span>
14. <span>05</span>
15. <span>06</span>
16. </span>

Contents

Use contents to create a “phantom” container whose children act like direct children of the parent.

1. <div class="flex ...">
2. <div class="flex-1 ...">01</div>
3. <div class="contents">
4. <div class="flex-1 ...">02</div>
5. <div class="flex-1 ...">03</div>
6. </div>
7. <div class="flex-1 ...">04</div>
8. </div>

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.

1. <div class="table w-full ...">
2. <div class="table-header-group ...">
3. <div class="table-row">
4. <div class="table-cell text-left ...">Song</div>
5. <div class="table-cell text-left ...">Artist</div>
6. <div class="table-cell text-left ...">Year</div>
7. </div>
8. </div>
9. <div class="table-row-group">
10. <div class="table-row">
11. <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
12. <div class="table-cell ...">Malcolm Lockyer</div>
13. <div class="table-cell ...">1961</div>
14. </div>
15. <div class="table-row">
16. <div class="table-cell ...">Witchy Woman</div>
17. <div class="table-cell ...">The Eagles</div>
18. <div class="table-cell ...">1972</div>
19. </div>
20. <div class="table-row">
21. <div class="table-cell ...">Shining Star</div>
22. <div class="table-cell ...">Earth, Wind, and Fire</div>
23. <div class="table-cell ...">1975</div>
24. </div>
25. </div>
26. </div>

Hidden

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

1. <div class="flex ...">
2. <div class="hidden ...">01</div>
3. <div>02</div>
4. <div>03</div>
5. </div>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:inline-flex to only apply the inline-flex utility on hover.

1. <div class="flex hover:inline-flex">
2. <!-- ... -->
3. </div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:inline-flex to apply the inline-flex utility at only medium screen sizes and above.

1. <div class="flex md:inline-flex">
2. <!-- ... -->
3. </div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.