Tailwind CSS - Sizing

Previous
Quiz
Next

Tailwind CSS Sizing includes the width, height and size. The with and height has indivitual classes as well to define the maximum and minimum with and height of any element as well.

Tailwind CSS Sizing Reference

Below mentioned topics can be used to create sizing of elements.

Topic Description Example
Tailwind CSS - Width This is used to set the width of any element.
Tailwind CSS - Min-Width This is used to set the minimum width of any element.
Tailwind CSS - Max-Width This is used to set the maximum width of any element.
Tailwind CSS - Height This is used to set the height of any element.
Tailwind CSS - Min-Height This is used to set the minimum height of any element.
Tailwind CSS - Max-Height This is used to set the maximu height of any element.
Tailwind CSS - Size This is used to set the dimension (width and height) size of any element.

Example of Tailwind CSS Sizing

Below examples will illustrate the Szing of Tailwind CSS.

Define Width using Tailwind CSS

In this following example we will showcase a few classes of width, min-width and max-width.

Example

<!DOCTYPE html>
<html>

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

<body class="p-4">
    <h2 class="text-xl mb-3"> Tailwind CSS Width Class </h2>
    <div class="w-44 bg-green-400 h-12 
                rounded-lg text-center m-2">
            w-44
    </div>
    <div class="w-40 bg-green-400 h-12 
                rounded-lg text-center m-2">
            w-40
    </div>
    <br>
    <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>
    <br>
    <div class=" max-w-64 inline-block 
                 bg-green-400 h-auto 
                 rounded-lg p-2.5 m-2 justify-text"> 
        This box has a min-w-64. 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>

Define Height using Tailwind CSS

In this following example we will showcase a few classes of height, min-height and max-height.

Example

<!DOCTYPE html>
<html>

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

<body class="p-4">
    <h2 class="text-2xl mb-2"> 
        Tailwind CSS Height Class 
    </h2>
    <div class="flex flex-wrap-reverse p-2 space-x-4
                h-auto w-80 bg-green-100 text-center">
        <div class="h-8 w-12 bg-green-400">h-8</div>
        <div class="h-16 w-12 bg-green-400">h-16</div>
        <div class="h-24 w-12 bg-green-400">h-24</div>
        <div class="h-32 w-12 bg-green-400">h-32</div>
        <div class="h-40 w-12 bg-green-400">h-40</div>
    </div>
    <br>
    <div class="flex">
        <div class="h-64 bg-green-200 p-2 text-center w-fit ">
            <div class="min-h-full w-20 bg-green-400">
                min-h-full 
            </div>
        </div>
        <div class="h-64 bg-green-200 p-2 text-center w-fit">
            <div class="min-h-8 w-20 bg-green-400">
                min-h-8
            </div>
        </div>
    </div>
    <br>
    <div class="h-64 bg-green-200 p-2 text-center w-fit">
            <div class="max-h-16 w-48 p-1 bg-green-400"> 
                max-h-16
            </div>
    </div>
</body>

</html>

Define Size using Tailwind CSS

In this following example we will showcase a few classes of size.

Example

<!DOCTYPE html>
<html>

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

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Size Class
    </h2>
    <div class="flex text-center space-x-1 bg-green-100 p-4">
        <div class="size-16 bg-green-400 
                    rounded-lg">size-16</div>
        <div class="size-20 bg-green-400 
                    rounded-lg">size-20</div>
    </div>             
    <br>
    <div class="text-center size-full 
                space-y-1 bg-green-100 p-4">
        <div class="size-1/2 bg-green-400 
                    rounded-lg">size-1/2</div>
        <div class="size-1/3 bg-green-400 
                    rounded-lg">size-1/3</div>
    </div>
    <br>
    <div class="size-4/6 md:size-auto 
                bg-green-400 rounded-lg p-2">
        When the screen size will be medium 
        then size of this element will be 
        auto adjusted based on the content.
    </div>
    </div>
</body>

</html>
Print Page
Previous
Next