Tailwind CSS - Size

Previous
Quiz
Next

Tailwind CSS Size is a utility class that provides an effective way of handling the content height and width. This is used to set the height and width or manipulate them.

Tailwind CSS Size Classes

The following is the list of Tailwind CSS Size classes that provide an effective way of handling content height and width.

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

Functionality of Tailwind CSS Size Classes

  • size-*: This specifies the height and width and can set a specific length. The * can be replaced with any acceptable value mentioned in the table.
  • min-px: This specifies the height and width as 1px value.
  • size-auto: This specifies the height and width is set according to the content
  • size-1/2: This specifies the height and width is set to half of the window.
  • size-1/3: This specifies the height and width is set to one-third of the window.
  • size-1/4: This specifies the height and width is set to one-fourth of the window.
  • size-1/5: This specifies the height and width is set to one-fifth of the window.
  • size-1/6: This specifies the height and width is set to one-sixth of the window.
  • size-1/12: This specifies the height and width is set to one-twelfth of the window.
  • size-full: This specifies the height and width is set to full.
  • size-min: This class is used to specify the min-height and min-width.
  • size-max: This class is used to specify the max-height and max-width.
  • size-fit: This class sets the height and width to fit the content into the parent.

Tailwind CSS Size Class Examples

The following examples will illustrate the Tailwind CSS Size class utility.

Define Fixed Size

To define a fixed size, we can use classes like `size-px`, `size-1`, and `size-24` classes. Any valid numeric value(w-*) can be used from the above table to create a fixed height and width at the same time.

Example

Here in this example, we will create five elements and set different fixed size classes on each of them.

<!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 class="size-24 bg-green-400 
                    rounded-lg">size-24</div>
        <div class="size-32 bg-green-400 
                    rounded-lg">size-32</div>
        <div class="size-40 bg-green-400 
                    rounded-lg">size-40</div>
    </div>

</body>

</html>

Define Percentage Size

Setting the percentage value on any element is sometimes beneficial because it will adjust the height and width according to the window size.

Example

Here in this example, we are going to use a few classes that totally depend on the window size.

<!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="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 class="size-1/4 bg-green-400 
                    rounded-lg">size-1/4</div>
        <div class="size-1/5 bg-green-400 
                    rounded-lg">size-1/5</div>
        <div class="size-1/6 bg-green-400 
                    rounded-lg">size-1/6</div>
        <div class="size-full bg-green-400
                    rounded-lg">size-1/12</div>
    </div>
</body>

</html>

Resetting Elements Size

A few times we need to reset the element's size based on screen size. Imagine we want to reset the size when the window size is medium, so we can simply use the `size-auto` on medium screen.

Example

Here in this example, we will reset the assigned size on the element to auto when the screen size will be medium.

<!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="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>
        <br>
    </div>
</body>

</html>
Print Page
Previous
Next