Tailwind CSS - Resize

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

Tailwind CSS Resize 类

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

Tailwind CSS Resize 类的功能

• resize-none此类禁用元素大小调整。
• resize-y此类仅允许垂直(上下)调整大小。
• resize-x此类仅允许水平(左右)调整大小。
• resize此类允许垂直和水平调整大小。

Tailwind CSS Resize 类示例

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

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

此代码展示了如何使用 Tailwind CSS Resize 类。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>