Tailwind CSS - Resize

Previous
Quiz
Next

Tailwind CSS Resize is a set of predefined classes that control the resizing behavior of elements. These classes allow you to easily specify whether an element can be resized by the user and, if so, in which directions.

Tailwind CSS Resize Classes

Below is a list of Tailwind CSS Resize classes for controlling the resize functionality of elements.

Class CSS Properties
resize-none resize: none;
resize-y resize: vertical;
resize-x resize: horizontal;
resize resize: both;

Functionality of Tailwind CSS Resize Classes

  • resize-none: This class disables resizing of the element.
  • resize-y: This class allows resizing only vertically (up and down).
  • resize-x: This class allows resizing only horizontally (left and right).
  • resize: This class allows resizing both vertically and horizontally.

Tailwind CSS Resize Class Examples

Below are examples of Tailwind CSS Resize classes, which show how to control the resizing behaviour of elements. These classes allow you to specify if an element can be resized horizontally, vertically, or both, and whether resizing is allowed or not.

Resizable and Non-Resizable Elements

This code shows how to use Tailwind CSS Resize classes. The resize-none class prevents resizing of the textarea, while the resize class allows the textarea to be resized freely in both directions.

Example

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

Controlling Vertical and Horizontal Resizing

This example shows how to use Tailwind CSS to control resizing. The resize-y class allows vertical resizing only, while the resize-x class allows horizontal resizing only.

Example

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

Resizable and Hover Effects

This example shows a textarea that is resizable within a fixed size, with color changes on hover. The element uses Tailwind CSS for resizing and hover effects, providing a visual update when hovered.

Example

<!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>
Print Page
Previous
Next