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>

列印頁面