Tailwind CSS - 尺寸

Tailwind CSS 尺寸包括宽度、高度和尺寸。宽度和高度也有单独的类，用于定义任何元素的最大和最小宽度和高度。

Tailwind CSS 尺寸参考

以下主题可用于创建元素的尺寸。

Tailwind CSS 尺寸示例

以下示例将说明 Tailwind CSS 的尺寸。

使用 Tailwind CSS 定义宽度

在下面的示例中，我们将展示一些 width、min-width 和最大宽度.

示例

<!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 定义高度

在下面的示例中，我们将展示几个 height、min-height 和 ma​​x-height 类。

示例

<!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 定义尺寸

在下面的示例中，我们将展示一些 size 类。

示例

<!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>