Tidadigi Logo

Tailwind CSS Display

Class này chấp nhận nhiều giá trị trong Tailwind CSS. Tất cả thuộc tính đều được bao phủ trong một class. Nó là một lựa chọn thay thế cho CSS display property. Class này được dùng để định nghĩa cách các thành phần được đặt trên trang web. Như tên gọi, thuộc tính này định nghĩa hiển thị các phần khác nhau.

Display Classes

Class Name

Description

block

Hiển thị một phần tử như một phần tử block.

inline-block

Hiển thị phần tử như một vùng chứa block mức inline.

inline

Hiển thị một phần tử như một phần tử inline.

flex

Hiển thị một phần tử như một vùng chứa flex mức block.

inline-flex

Hiển thị một phần tử như một vùng chứa flex mức inline.

table

Thiết lập hành vi như <table> cho tất cả các phần tử.

table-caption

Thiết lập hành vi như <caption> cho tất cả các phần tử.

table-cell

Thiết lập hành vi như <td> cho tất cả các phần tử.

table-column

Thiết lập hành vi như <col> cho tất cả các phần tử.

table-column-group

Thiết lập hành vi như <column> cho tất cả các phần tử.

table-footer-group

Thiết lập hành vi như <footer> cho tất cả các phần tử.

table-header-group

Thiết lập hành vi như <header> cho tất cả các phần tử.

table-row-group

Thiết lập hành vi như <row> cho tất cả các phần tử.

table-row

Thiết lập hành vi như <tr> cho tất cả các phần tử.

flow-root

Thiết lập giá trị mặc định.

grid

Hiển thị một phần tử như một vùng chứa grid mức block.

inline-grid

Hiển thị một phần tử như một vùng chứa grid mức inline.

contents

Ẩn vùng chứa.

hidden

Loại bỏ phần tử.

Tailwind CSS Block Element (block Class)

Nó được sử dụng để hiển thị một phần tử như một phần tử mức block. Class này là thuộc tính mặc định của thẻ div. Class này đặt các thẻ div cái này sau cái kia theo chiều dọc. Chiều cao và chiều rộng của thẻ div có thể được thay đổi bằng class block. Nếu chiều rộng không được chỉ định, thẻ div dưới class block sẽ chiếm chiều rộng của vùng chứa.

Syntax:

<element display="block">...</element>

Example 1:

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <b>Tailwind CSS block Class</b>

    <div class="bg-green-200 p-4 mx-16 space-y-4">
        <span class="block h-12 bg-green-500 rounded-lg">1</span>
        <span class="block h-12 bg-green-500 rounded-lg">2</span>
        <span class="block h-12 bg-green-500 rounded-lg">3</span>
    </div>
</body>

</html>

Output:

tailwind-css-display

Tailwind CSS Inline Block Element (inline-block Class)

Nó được sử dụng để hiển thị một phần tử như một vùng chứa block mức inline. Tính năng này sử dụng cả hai thuộc tính block và inline. Vì vậy class này căn chỉnh các thẻ div inline. Điểm khác biệt là có thể chỉnh sửa chiều cao và chiều rộng của block. Về cơ bản, class này sẽ căn chỉnh div theo kiểu block và inline.

Syntax:

<element display="inline-block">...</element>

Example 2: 

HTML 
<!DOCTYPE html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <b>Tailwind CSS inline-block Class</b>
    
    <div class="bg-green-200 p-4 mx-16 space-y-4">
        <span class="inline-block w-32 h-12 bg-green-500 rounded-lg">1</span>
        <span class="inline-block w-32 h-12 bg-green-500 rounded-lg">2</span>
        <span class="inline-block w-32 h-12 bg-green-500 rounded-lg">3</span>
    </div>
</body>

</html>

Output:

tailwind-css-display

Tailwind CSS Inline Block Element (inline Class)

Nó được dùng để hiển thị một phần tử như một phần tử inline. Class này là thuộc tính mặc định của thẻ anchor. Class này được dùng để đặt các thẻ div inline theo chiều ngang. Thuộc tính hiển thị inline bỏ qua chiều cao và chiều rộng được thiết lập.

Syntax:

<element display="inline">...</element>

Example 3:

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS inline Class</b>
    <div class="bg-green-200 p-4 mx-16 space-y-4">
        <span class="inline bg-green-500 rounded-lg">1</span>
        <span class="inline bg-green-500 rounded-lg">2</span>
        <span class="inline bg-green-500 rounded-lg">3</span>
    </div>
</body>

</html>

Output:

tailwind-css-display

Tailwind CSS Flex Element (flex Class)

Class flex rất linh hoạt và thân thiện với thiết bị di động. Dễ dàng định vị các phần tử con và vùng chứa chính. Margin không bị thu gọn với margin của nội dung. Thứ tự của bất kỳ phần tử nào có thể dễ dàng thay đổi mà không cần chỉnh sửa HTML.

Syntax:

<element display="flex">...</element>

Example 4: 

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
        rel="stylesheet">
</head>

<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>

    <b>Tailwind CSS flex Class</b>
    
    <div class="flex bg-green-200 p-4 mx-16 ">
        <div class="flex-1 bg-green-500 rounded-lg">1</div>
        <div class="flex-1 bg-green-500 rounded-lg">2</div>
        <div class="flex-1 bg-green-500 rounded-lg">3</div>
    </div>
</body>

</html>

Output:

tailwind-css-display
Last Updated : 20/07/2025