Tailwind CSS - 调整大小

Tailwind CSS **调整大小** 是一组预定义的类，用于控制元素的调整大小行为。这些类允许您轻松指定用户是否可以调整元素的大小，以及如果可以，则调整的方向。

Tailwind CSS 调整大小类

以下是用于控制元素调整大小功能的 Tailwind CSS 调整大小类的列表。

类	CSS 属性
resize-none	resize: none;
resize-y	resize: vertical;
resize-x	resize: horizontal;
resize	resize: both;

Tailwind CSS 调整大小类的功能

**resize-none:** 此类禁用元素的调整大小。
**resize-y:** 此类仅允许垂直调整大小（上下）。
**resize-x:** 此类仅允许水平调整大小（左右）。
**resize:** 此类允许垂直和水平调整大小。

Tailwind CSS 调整大小类示例

以下是 Tailwind CSS 调整大小类的示例，它们展示了如何控制元素的调整大小行为。这些类允许您指定元素是否可以水平、垂直或同时调整大小，以及是否允许调整大小。

可调整大小和不可调整大小的元素

此代码展示了如何使用 Tailwind CSS 调整大小类。**resize-none** 类阻止文本区域调整大小，而 **resize** 类允许文本区域在两个方向上自由调整大小。

示例

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

<body class="p-4">
    <h2 class="text-xl font-bold mb-4">
        Tailwind CSS Resize Classes
    </h2>
    <div class="grid grid-cols-2 gap-4"> 
        <div>
            <h3 class="underline font-semibold mb-2">resize-none</h3>
            <textarea class="resize-none w-32 h-16 p-2 border border-gray-300"
                      placeholder="Resize disabled"></textarea>
            <p class="text-sm">Cannot be resized.</p>
        </div>
            <!--Applying Resize class-->
        <div>
            <h3 class="underline font-semibold mb-2">resize</h3>
            <textarea class="resize w-32 h-16 p-2 border 
                border-gray-300" placeholder="Resize freely"></textarea>
            <p class="text-sm">Can be resized in both directions.</p>
        </div>
    </div>
</body>

</html>

控制垂直和水平调整大小

此示例展示了如何使用 Tailwind CSS 控制调整大小。**resize-y** 类仅允许垂直调整大小，而 **resize-x** 类仅允许水平调整大小。

示例

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

<body class="p-4">
    <h2 class="text-xl font-bold mb-4">
        Tailwind CSS Resize Classes
    </h2>
    <div class="grid grid-cols-2 gap-4"> 
        <div>
            <h3 class="underline font-semibold mb-2">resize-y</h3>
            <textarea class="resize-y w-32 h-16 p-2 border border-gray-300" 
                      placeholder="Resize vertically"></textarea>
            <p class="text-sm">Can only be resized vertically.</p>
        </div>
            <!--Applying Resize-x-->
        <div>
            <h3 class="underline font-semibold mb-2">resize-x</h3>
            <textarea class="resize-x w-32 h-16 p-2 border border-gray-300" 
                       placeholder="Resize horizontally"></textarea>
            <p class="text-sm">Can only be resized horizontally.</p>
        </div>
    </div>
</body>

</html>

可调整大小和悬停效果

此示例展示了一个在固定大小内可调整大小的文本区域，并在悬停时更改颜色。该元素使用 Tailwind CSS 进行调整大小和悬停效果，在悬停时提供视觉更新。

示例

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

<body class="p-4">
    <h2 class="text-xl font-bold mb-4">
        Tailwind CSS Resize
    </h2>
    <div class="mb-4">
        <h3 class="underline font-semibold mb-2">
            Resize with Fixed Size
        </h3>
        <textarea class="resize w-64 h-32 p-2 border border-gray-300 
                         hover:bg-gray-200 hover:border-gray-500"
                  placeholder="Resize and hover"></textarea>
        <p class="text-sm mt-2">
            Resizable within a fixed size; color changes on hover.
        </p>
    </div>
</body>

</html>

打印页面