Tailwind CSS Box Sizing

The CSS box-sizing property controls how an element's width and height are calculated. Tailwind CSS provides two utilities:

• box-border — Includes padding and borders within the specified width and height.
• box-content — Applies width and height only to the content; padding and borders are added outside.

Box Sizing Classes

1. Tailwind CSS box-border Class

The box-border utility sets box-sizing: border-box. This means the specified width and height include the element's content, padding, and border. For example, if an element has a width of 200px, 20px of padding, and a 4px border, its total rendered width remains 200px. The available content area becomes smaller to accommodate the padding and border.

Syntax:

<element class="box-border">...</element>

Example:

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="text-center">

    <div class="box-border m-auto h-28 w-32 border-4 bg-green-500 p-4">
        A Computer Science Portal
    </div>
</body>
</html>

2. Tailwind CSS box-content Class

The box-content utility sets box-sizing: content-box. In this mode, the specified width and height apply only to the content area. For example, if an element has a width of 200px, 20px of padding, and a 4px border, the padding and border are added to the specified content width. Therefore, the element's final rendered width is larger than 200px.

Syntax:

<element class="box-content">...</element>

Example:

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="text-center">

    <div class="box-content m-auto h-28 w-32 border-4 bg-green-500 p-4">
        A Computer Science Portal
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Difference Between box-border and box-content

The main difference is whether padding and borders are included in the specified dimensions.

For example, consider an element with:

• w-32 → 8rem (128px)
• p-4 → 1rem (16px) on each side
• border-4 → 4px on each side

With box-border, the total width remains 128px. With box-content, the content width is 128px, and the padding and borders are added to it, making the total width 168px.