Tidadigi Logo

Tailwind CSS Resize

Class này chấp nhận nhiều giá trị trong tailwind CSS, bao gồm tất cả thuộc tính dưới dạng class. Class này dùng để thay đổi kích thước phần tử theo yêu cầu người dùng. Nó không áp dụng cho phần tử inline hoặc block khi overflow hiển thị. Trong CSS, ta dùng thuộc tính CSS resize để thực hiện điều đó.

Resize

  • resize-none: Class này ngăn không cho phép thay đổi kích thước của một phần tử.
  • resize-y: Class này cho phép thay đổi kích thước phần tử theo chiều dọc.
  • resize-x: Class này cho phép thay đổi kích thước phần tử theo chiều ngang.
  • resize: Class này cho phép thay đổi kích thước phần tử theo cả hai chiều.

Syntax:

<element class="pointer-{axis-boolean}">...</element>

Example:

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Resize Class</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>

<body class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">

    <h1 class="text-green-600 text-5xl font-bold mb-6">
        GeeksforGeeks
    </h1>
    <b class="text-xl mb-4">Tailwind CSS Resize Class</b>
    
    <div id="main" class="p-6 flex flex-wrap justify-center bg-green-200 border-4 border-green-900 gap-4 rounded-lg shadow-lg">
        <textarea class="resize border rounded-md w-24 h-12 p-2"></textarea>
        <textarea class="resize-y border rounded-md w-24 h-12 p-2"></textarea>
        <textarea class="resize-x border rounded-md w-24 h-12 p-2"></textarea>
        <textarea class="resize-none border rounded-md w-24 h-12 p-2"></textarea>
    </div>

</body>

</html>

Output:


Last Updated : 20/07/2025