Tailwind CSS - Box Sizing

Previous
Quiz
Next

Tailwind CSS Box Sizing is a utility class that defines how an element's width and height are calculated as the element's total size. It specifies how an element's padding and border are included in it's width and height.

Tailwind CSS Box Sizing Classes

The following is the Tailwind CSS Box Sizing Classes list that effectively shows how an element's width and height are calculated, including padding and border.

Class CSS Properties
box-border box-sizing: border-box;
box-content box-sizing: content-box;

Functionality of Tailwind CSS Box Sizing Classes

  • box-border: This class replaces the CSS box-sizing: border-box; property. Setting the element's utility to box-border, which means the width and height of the element include its padding and border.
  • box-content: This class replaces the CSS box-sizing: content-box; property. Setting the element's utility to box-content, which means the width and height of the element do not include its padding and border.

Tailwind CSS Box Sizing Classes Example

Below example will illustrate the Tailwind CSS Box Sizing classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h2 class="text-3xl 
            mb-3">
        Tailwind CSS Box Sizing Classes
    </h2>
    <div class="flex">
        <div class="box-border 
                    w-32 h-32 
                    p-4 border-4 
                    bg-blue-500 
                    mr-3">
            Box Border
        </div>
        <div class="box-content 
                    w-32 h-32 
                    p-4 border-4 
                    bg-red-500">
            Box Content
        </div>
    </div>
</body>
</html>
Print Page
Previous
Next