Tidadigi Logo

Tailwind CSS Min-Width

Class này chấp nhận nhiều giá trị trong tailwind CSS, bao gồm các thuộc tính dưới dạng class. Nó là một lựa chọn thay thế cho thuộc tính CSS min-width. Class này dùng để xác định chiều rộng tối thiểu của một phần tử. Giá trị chiều rộng không được nhỏ hơn giá trị của min-width. Nếu nội dung trong phần tử nhỏ hơn, min-width vẫn duy trì chiều rộng tối thiểu.

Min-Width Classes

  • min-w-0: Class này dùng để thiết lập độ dài của min-width.
  • min-w-full: Class này dùng để đặt độ dài của min-width ở mức tối đa.
  • min-w-min: Class này dùng để đặt độ dài của min-width ở mức tối thiểu.
  • min-w-max: Class này dùng để đặt độ dài của min-width ở mức tối đa.

Syntax:

<element class="min-w-0">...</element>

Example: Chiều rộng sẽ thay đổi theo kích thước của màn hình.

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
  
    <p><b>Tailwind CSS MIn-Width Class</b></p>
  
    <div class="w-24 h-16 min-w-full md:min-w-0 
                bg-green-400 rounded-lg text-white">
    </div>
</body> 

</html>

Output:

tailwind-css-min-width
Last Updated : 20/07/2025