Tailwind CSS - 尺寸

上一頁
下一頁

Tailwind CSS 尺寸包括**寬度**、**高度**和**大小**。寬度和高度也有各自的類，用於定義任何元素的最大和最小寬度和高度。

Tailwind CSS 尺寸參考

下面提到的主題可用於建立元素的尺寸。

主題 描述 示例
Tailwind CSS - 寬度 用於設定任何元素的寬度。
Tailwind CSS - 最小寬度 用於設定任何元素的最小寬度。
Tailwind CSS - 最大寬度 用於設定任何元素的最大寬度。
Tailwind CSS - 高度 用於設定任何元素的高度。
Tailwind CSS - 最小高度 用於設定任何元素的最小高度。
Tailwind CSS - 最大高度 用於設定任何元素的最大高度。
Tailwind CSS - 尺寸 用於設定任何元素的尺寸（寬度和高度）。

Tailwind CSS 尺寸示例

以下示例將說明 Tailwind CSS 的尺寸。

使用 Tailwind CSS 定義寬度

在以下示例中，我們將展示一些**寬度**、**最小寬度**和**最大寬度**的類。

示例

<!DOCTYPE html>
<html>

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

<body class="p-4">
    <h2 class="text-xl mb-3"> Tailwind CSS Width Class </h2>
    <div class="w-44 bg-green-400 h-12 
                rounded-lg text-center m-2">
            w-44
    </div>
    <div class="w-40 bg-green-400 h-12 
                rounded-lg text-center m-2">
            w-40
    </div>
    <br>
    <div class=" min-w-40 inline-block 
                 bg-green-400 h-auto rounded-lg
                 p-2.5 m-2">
         This box has a min-w-40. But the content is larger 
         than the min-width. Hence the value of min-width 
         has no effect. This is a dimensional property which 
         can be styled using tailwind CSS. 
    </div>
    <br>
    <div class=" max-w-64 inline-block 
                 bg-green-400 h-auto 
                 rounded-lg p-2.5 m-2 justify-text"> 
        This box has a min-w-64. But the content is 
        larger than the min-width. Hence the value 
        of min-width has no effect. This is a dimensional
        property which can be styled using tailwind CSS. 
    </div>
</body>

</html>

使用 Tailwind CSS 定義高度

在以下示例中，我們將展示一些**高度**、**最小高度**和**最大高度**的類。

示例

<!DOCTYPE html>
<html>

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

<body class="p-4">
    <h2 class="text-2xl mb-2"> 
        Tailwind CSS Height Class 
    </h2>
    <div class="flex flex-wrap-reverse p-2 space-x-4
                h-auto w-80 bg-green-100 text-center">
        <div class="h-8 w-12 bg-green-400">h-8</div>
        <div class="h-16 w-12 bg-green-400">h-16</div>
        <div class="h-24 w-12 bg-green-400">h-24</div>
        <div class="h-32 w-12 bg-green-400">h-32</div>
        <div class="h-40 w-12 bg-green-400">h-40</div>
    </div>
    <br>
    <div class="flex">
        <div class="h-64 bg-green-200 p-2 text-center w-fit ">
            <div class="min-h-full w-20 bg-green-400">
                min-h-full 
            </div>
        </div>
        <div class="h-64 bg-green-200 p-2 text-center w-fit">
            <div class="min-h-8 w-20 bg-green-400">
                min-h-8
            </div>
        </div>
    </div>
    <br>
    <div class="h-64 bg-green-200 p-2 text-center w-fit">
            <div class="max-h-16 w-48 p-1 bg-green-400"> 
                max-h-16
            </div>
    </div>
</body>

</html>

使用 Tailwind CSS 定義大小

在以下示例中，我們將展示一些**大小**的類。

示例

<!DOCTYPE html>
<html>

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

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Size Class
    </h2>
    <div class="flex text-center space-x-1 bg-green-100 p-4">
        <div class="size-16 bg-green-400 
                    rounded-lg">size-16</div>
        <div class="size-20 bg-green-400 
                    rounded-lg">size-20</div>
    </div>             
    <br>
    <div class="text-center size-full 
                space-y-1 bg-green-100 p-4">
        <div class="size-1/2 bg-green-400 
                    rounded-lg">size-1/2</div>
        <div class="size-1/3 bg-green-400 
                    rounded-lg">size-1/3</div>
    </div>
    <br>
    <div class="size-4/6 md:size-auto 
                bg-green-400 rounded-lg p-2">
        When the screen size will be medium 
        then size of this element will be 
        auto adjusted based on the content.
    </div>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告