Tailwind CSS - 尺寸

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

Tailwind CSS 尺寸参考

下面提到的主题可用于创建元素的尺寸。

主题	描述	示例
Tailwind CSS - 宽度	用于设置任何元素的宽度。	尝试一下
Tailwind CSS - 最小宽度	用于设置任何元素的最小宽度。	尝试一下
Tailwind CSS - 最大宽度	用于设置任何元素的最大宽度。	尝试一下
Tailwind CSS - 高度	用于设置任何元素的高度。	尝试一下
Tailwind CSS - 最小高度	用于设置任何元素的最小高度。	尝试一下
Tailwind CSS - 最大高度	用于设置任何元素的最大高度。	尝试一下
Tailwind CSS - 尺寸	用于设置任何元素的尺寸（宽度和高度）。	尝试一下

Tailwind CSS 尺寸示例

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

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

使用 Tailwind CSS 定义宽度

在以下示例中，我们将展示一些**宽度**、**最小宽度**和**最大宽度**的类。

示例

Open Compiler

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

在以下示例中，我们将展示一些**高度**、**最小高度**和**最大高度**的类。

示例

Open Compiler

<!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 定义大小

在以下示例中，我们将展示一些**大小**的类。

示例

Open Compiler

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

打印页面