Tailwind CSS - Box Sizing

Modern Guide to Tailwind CSS: Box Sizing

The box-sizing utility controls how the total width and height of an element are calculated. Understanding this is fundamental to creating predictable and maintainable layouts in CSS.

The Modern Default: box-border

By default, Tailwind CSS applies box-sizing: border-box; to every element. This is a modern best practice that makes layout math intuitive. When you set an element’s width, that width will include its padding and border, not just its content.

• box-border (border-box): width + height = Content + Padding + Border. If you set w-32, the element’s final rendered width will be 8rem (128px), regardless of its padding or border thickness.
• box-content (content-box): width + height = Content only. If you set w-32 and add p-4, the element’s final rendered width will be 8rem (for content) + 1rem (left padding) + 1rem (right padding) = 10rem (160px).

Box Sizing Utilities

While box-border is the default, you can override it when needed.

Class	CSS Properties	Description
box-border	box-sizing: border-box;	The width and height properties include content, padding, and border. This is Tailwind’s default.
box-content	box-sizing: content-box;	The width and height properties include only the content. Padding and border are added on top.

Visualizing the Difference

The following example clearly demonstrates why box-border is so useful. Both blue boxes are given w-48, but one is box-content. Notice how the box-content element becomes wider because its padding and border are added to its width.

Example Code (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Box Sizing Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 p-8 font-sans">

  <div class="space-y-6">
    <div>
      <h2 class="text-2xl font-bold mb-2 text-slate-800">`box-border` (Default)</h2>
      <p class="mb-3 text-slate-600">Final width is exactly `w-48`. Padding and border are contained within.</p>
      <div class="box-border w-48 h-32 p-4 border-8 border-blue-600 bg-blue-300">
        <div class="bg-blue-800 text-white p-2">Content</div>
      </div>
    </div>

    <div>
      <h2 class="text-2xl font-bold mb-2 text-slate-800">`box-content` (Override)</h2>
      <p class="mb-3 text-slate-600">Final width is `w-48` + padding + border. The element is visibly wider.</p>
      <div class="box-content w-48 h-32 p-4 border-8 border-blue-600 bg-blue-300">
         <div class="bg-blue-800 text-white p-2">Content</div>
      </div>
    </div>
  </div>

</body>
</html>

When to Use box-content?

You will rarely need to use box-content in modern development. Its primary use case is for integrating with third-party components or legacy CSS that was written with the expectation of content-box behavior. By providing the box-content utility, Tailwind gives you an escape hatch to handle these specific situations without disrupting the border-box default for the rest of your project.