Tailwind CSS - Min-Width

Previous
Quiz
Next

Tailwind CSS min-width is a utility class that provides an effective way of handling the minimum-width of the content. This is used to set the min-width or manipulate the min-width of any HTML elements.

Tailwind CSS Min-Width Classes

The following is the list of Tailwind CSS min-width classes that provide an effective way of handling content min-width.

Class CSS Properties
min-w-0 min-width: 0px;
min-w-1 min-width: 0.25rem; /* 4px */
min-w-2 min-width: 0.5rem; /* 8px */
min-w-3 min-width: 0.75rem; /* 12px */
min-w-4 min-width: 1rem; /* 16px */
min-w-5 min-width: 1.25rem; /* 20px */
min-w-6 min-width: 1.5rem; /* 24px */
min-w-7 min-width: 1.75rem; /* 28px */
min-w-8 min-width: 2rem; /* 32px */
min-w-9 min-width: 2.25rem; /* 36px */
min-w-10 min-width: 2.5rem; /* 40px */
min-w-11 min-width: 2.75rem; /* 44px */
min-w-12 min-width: 3rem; /* 48px */
min-w-14 min-width: 3.5rem; /* 56px */
min-w-16 min-width: 4rem; /* 64px */
min-w-20 min-width: 5rem; /* 80px */
min-w-24 min-width: 6rem; /* 96px */
min-w-28 min-width: 7rem; /* 112px */
min-w-32 min-width: 8rem; /* 128px */
min-w-36 min-width: 9rem; /* 144px */
min-w-40 min-width: 10rem; /* 160px */
min-w-44 min-width: 11rem; /* 176px */
min-w-48 min-width: 12rem; /* 192px */
min-w-52 min-width: 13rem; /* 208px */
min-w-56 min-width: 14rem; /* 224px */
min-w-60 min-width: 15rem; /* 240px */
min-w-64 min-width: 16rem; /* 256px */
min-w-72 min-width: 18rem; /* 288px */
min-w-80 min-width: 20rem; /* 320px */
min-w-96 min-width: 24rem; /* 384px */
min-w-px min-width: 1px;
min-w-0.5 min-width: 0.125rem; /* 2px */
min-w-1.5 min-width: 0.375rem; /* 6px */
min-w-2.5 min-width: 0.625rem; /* 10px */
min-w-3.5 min-width: 0.875rem; /* 14px */
min-w-full min-width: 100%;
min-w-min min-width: min-content;
min-w-max min-width: max-content;
min-w-fit min-width: fit-content;

Functionality of Tailwind CSS Min-Width Classes

  • min-w-*: This specifies the min-width can be set to specific length. The * can be replaced with any acceptable value mentioned in the table.
  • min-w-px: This specifies the min-width as a 1px value.
  • min-w-full: This specifies the min-width is set to full.
  • min-w-fit: This specifies the min-width is set to the screen size.
  • min-w-min: This class is used to specify the min-width at minimum capacity.
  • min-w-max: This class is used to specify the min-width at maximum capacity.

Tailwind CSS Min-Width Class Examples

The following examples will illustrate the Tailwind CSS min-width class utility.

Setting Minimum Width

We have used the CSS minimum-width property so many times, as here we can achieve that by using the mentioned classes as well.

Example

Here in this example, we will create three elements and set different minimum widths by using the above mentioned classes.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3">
        Tailwind CSS min-width Class
    </h2>
    <div class="min-w-48 inline-block 
                bg-green-400 h-12 rounded-lg p-2.5 m-2">
        This box has min-w-48
    </div>
    <br>
    <div class="min-w-96 inline-block 
                bg-green-400 h-12 rounded-lg p-2.5 m-2">
        This box has a minimum width of min-w-96.
    </div>
    <div class=" min-w-40 inline-block bg-green-400 
                h-auto rounded-lg p-2.5 m-2">
        This box has a min-w-40. But the content is
        larger than the min-width. Hence the value of min-width
        has no effect. This is a dimensional property which can
        be styled using tailwind CSS.
    </div>
</body>

</html>

Conditional Minimum Width

We can change the minimum width value based on conditions like hove, focus, or screen size. To set a condition on any element's minimum width, we can use `hover`, `focus` classes.

Example

In the following example, we will change the minimum width value on hover over the element.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3">
        Tailwind CSS min-width Class
    </h2>
    <div class="min-w-96 inline-block hover:min-w-0
                bg-green-400 h-12 rounded-lg p-2.5 m-2">
        Hover over me
    </div>

</body>

</html>
Print Page
Previous
Next