Tailwind CSS - Display

Previous
Quiz
Next

Tailwind CSS Display is a utility class that helps to determine how elements are displayed in the document. This utility controls the display type of an element.

Tailwind CSS Display Classes

The list of Tailwind CSS Display Classes that provides an effective way to determine the display type of an element.

Class CSS 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;

Functionality of Tailwind CSS Display Classes

  • block: It will display element as a block level element, starts on a new line, and takes up the whole width.
  • inline-block: Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
  • inline: It will display element as a inline element. Any height and width properties will have no effect.
  • flex: It displays an element as a block-level flex container.
  • inline-flex: It displays an element as an inline-level flex container.
  • table: It displays an element as a table.
  • inline-table: The element is displayed as an inline-level table.
  • table-caption: Enable element behave like a <caption> element.
  • table-cell: Enable element behave like a <td> element.
  • table-column: Enable element behave like a <col> element.
  • table-column-group: Enable element behave like a <column>.
  • table-footer-group: Enable element behave like a <tfoot> element.
  • table-header-group: Enable element behave like a <thead> element.
  • table-row-group: Enable element behave like a <tbody> element.
  • table-row: Enable element behave like a <tr> element.
  • flow-root: It create a block-level element with its own block formatting context.
  • grid: It displays an element as a block-level grid container.
  • inline-grid: It displays an element as an inline-level grid container.
  • contents: Makes the container disappear, making the child elements children of the element the next level up in the DOM.
  • list-item: Enable element behave like a <li> element.
  • hidden: It makes an element invisible and remove it from the document flow.

Tailwind CSS Display Classes Examples

Below example will illustrate the Tailwind CSS display classes.

Example 1

The following example is demonstrating the use of Inline, Block, Inline-Block classes.

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-2">
    <h1 class="text-3xl">
        Tailwind CSS Display- Inline, Block, Inline-Block
    </h1>
    <h2 class="text-2xl 
               my-2
               text-lime-600">
        Display - Inline
    </h2>
    <li class="inline 
               border-2 
               rounded p-1 
               border-blue-700">
        Item1
    </li>
    <li class="inline 
               border-2 
               rounded p-1 
               border-rose-700">
        Item2
    </li>
    <li class="inline 
               border-2 
               rounded p-1 
               border-fuchsia-700">
        Item3
    </li>

    <h2 class="text-2xl 
               my-2
               text-yellow-600">
        Display - Block
    </h2>
    <li class="block 
               border-2 
               rounded p-1 
               border-blue-700">
        Item1
    </li>
    <li class="block 
               border-2 
               rounded p-1 
               border-rose-700">
        Item2
    </li>
    <li class="block 
               border-2 
               rounded p-1 
               border-fuchsia-700">
        Item3
    </li>

    <h2 class="text-2xl 
               my-2
               text-violet-600">
        Display - Inline-block
    </h2>
    <li class="inline-block 
               border-2
               h-12  w-32
               rounded p-1 
               border-blue-700">
        Inline-Block 1
    </li>
    <li class="inline-block 
               border-2
               h-12  w-32
               rounded p-1 
               border-rose-700">
        Inline-Block 2
    </li>
    <li class="inline-block
               h-12  w-32
               border-2 
               rounded p-1 
               border-fuchsia-700">
        Inline-Block 3
    </li>
</body>

</html>

Example 2

The following example is demonstrating the use of Flex & Inline-Flex classes.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
    <h1 class="text-3xl">
        Tailwind CSS Display- Flex, Inline-Flex
    </h1>

    <h2 class="text-2xl 
               my-2
               text-lime-600">
        display: flex
    </h2>
    <div class="flex
                border-2
                rounded p-1 
                border-blue-700
                mb-1">
        Flex-Block 1
    </div>
    <div class="flex
                border-2
                rounded p-1 
                border-rose-700
                mb-1">
        Flex-Block 2
    </div>
    <div class="flex
                border-2
                rounded p-1 
                border-fuchsia-700">
        Flex-Block 3
    </div>

    <h2 class="text-2xl 
               my-2
               text-violet-600">
        display: inline-flex
    </h2>
    <div class="inline-flex
                border-2
                rounded p-1 
                border-blue-700">
        Inline Flex-Block 1
    </div>
    <div class="inline-flex
                border-2
                rounded p-1 
                border-rose-700">
        Inline Flex-Block 2
    </div>
    <div class="inline-flex
                border-2
                rounded p-1 
                border-fuchsia-700">
        Inline Flex-Block 3
    </div>
</body>
</html>

Example 3

The following example is demonstrating the use of table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row classes.

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-3xl
               text-center
               mb-2">
        Tailwind CSS Display Classes Example
    </h2>
    <div class="table 
                w-full
                border">
        <div class="table-caption
                     text-center
                     text-xl
                     font-bold
                     text-orange-400">
            Sample Table
        </div>
        <div class="table-header-group">
            <div class="table-row">
                <div class="table-cell 
                            text-center
                            p-2
                            border
                            bg-slate-100">
                    Header 1
                </div>
                <div class="table-cell 
                            text-center
                            p-2
                            border
                            bg-slate-100">
                    Header 2
                </div>
            </div>
        </div>
        <div class="table-row-group">
            <div class="table-row">
                <div class="table-cell
                            text-center
                            p-2
                            border">
                    Row1-Cell1
                </div>
                <div class="table-cell
                            text-center
                            p-2
                            border">
                    Row1-cell2
                </div>
            </div>
            <div class="table-row">
                <div class="table-cell
                            text-center
                            p-2
                            border">
                    Row2-Cell1
                </div>
                <div class="table-cell
                            text-center
                            p-2
                            border">
                    Row2-Cell1
                </div>
            </div>
        </div>
        <div class="table-footer-group">
            <div class="table-row">
                <div class="table-cell
                            text-center
                            p-2
                            border
                            bg-slate-100">
                    Footer 1
                </div>
                <div class="table-cell
                            text-center
                            p-2
                            border
                            bg-slate-100">
                    Footer 2
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Example 4

The following example is demonstrating the use of Grid & Inline-Grid classes.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-3xl
               mb-2">
        Tailwind CSS Display Grid Example
    </h2>
    <div class="grid
                bg-orange-200
                p-2 mb-2
                rounded
                text-center">
        grid-Block 1
    </div>
    <div class="grid
                bg-amber-200
                p-2 mb-2
                rounded
                text-center">
        grid-Block 2
    </div>
    <div class="grid
                bg-lime-200
                p-2 mb-2
                rounded
                text-center">
        grid-Block 3
    </div>
    
    <h2 class="text-3xl
               mb-2">
        Tailwind CSS Display Inline-Grid Example
    </h2>
    <div class="inline-grid
                bg-orange-200
                p-2 mb-2
                rounded
                text-center">
        grid-Block 1
    </div>
    <div class="inline-grid
                bg-amber-200
                p-2 mb-2
                rounded
                text-center">
        grid-Block 2
    </div>
    <div class="inline-grid
                bg-lime-200
                p-2 mb-2
                rounded
                text-center">
        grid-Block 3
    </div>
</body>
</html>

Example 5

The following example is demonstrating the use of Content, List-Item & Hidden classes.

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">

    <h2 class="text-3xl
                mb-2">
        Tailwind CSS Content Class Example
    </h2>
    <div class="contents">
        <div class="bg-blue-200 p-4">
            <p>This is part of a contents element.</p>
        </div>
        <div class="bg-green-200 p-4">
            <p>This is also part of a contents element.</p>
        </div>
    </div>

    <h2 class="text-3xl
                my-2">
        Tailwind CSS List-Item Class Example
    </h2>
    <div class="list-item">
        Item 1
    </div>
    <div class="list-item">
        Item 2
    </div>
    <div class="list-item">
        Item 3
    </div>

    <h2 class="text-3xl
                mt-2">
        Tailwind CSS hidden Class Example
    </h2>
    <div class="hidden">
        <p>This content is hidden and will not be displayed.</p>
    </div>
</body>

</html>
Print Page
Previous
Next