Tailwind CSS Sizing

Tailwind provides utility classes for controlling the width and height of elements, supporting fixed sizes, percentages, and relative units.

Sizing utilities in Tailwind use the same numeric scale as spacing (where 4 equals 1rem) for fixed dimensions, but they also include a robust set of fractional and keyword-based values for flexible layouts.

Fixed vs. Fluid Sizing

You can set an element to a specific pixel-based size or allow it to be fluid based on its container or the viewport.

Category	Classes	Example CSS
Fixed	`w-<size>`, `h-<size>`	`width: 16rem;` (w-64)
Percentages	`w-1/2`, `h-full`	`width: 50%;`, `height: 100%;`
Viewport	`w-screen`, `h-screen`	`width: 100vw;`, `height: 100vh;`
Automatic	`w-auto`, `w-min`, `w-max`	`width: auto;`, `min-content`

Fractional Widths

Tailwind's fractional scale can be used for building grid-like layouts without using the more complex grid properties.

Class	Width
`w-1/2`	50%
`w-2/5`, `w-3/5`	40%, 60%
`w-1/3`, `w-2/3`	33.3%, 66.6%
`w-1/4`, `w-3/4`	25%, 75%
`w-1/5`, `w-4/5`	20%, 80%
`w-1/6`, `w-5/6`	16.6%, 83.3%
`w-full`	100%

Sizing Constraints (Min/Max)

Constraints prevent layouts from breaking across different screen sizes by defining boundaries for growth and shrinkage. These include modern logical properties and dynamic viewport units.

Width & Inline Constraints

Utility	Value / Purpose	Best Use Case
`max-w-{size}`	`20rem` (xs) to `80rem` (7xl)	Standard container boundaries.
`max-w-prose`	`65ch`	Optimizing text readability (line length).
`max-w-none`	`none`	Removing inherited width constraints.
`max-w-full`	`100%`	Ensuring elements don't overflow parents.
`max-inline-{size}`	Logical Width	Responsive layouts for LTR/RTL languages.

Height & Block Constraints

Utility	CSS Value	Behavior
`min-h-screen`	`100vh`	Full viewport height (standard).
`min-h-svh`	`100svh`	"Small" viewport (ignores mobile UI bars).
`min-h-lvh`	`100lvh`	"Large" viewport (includes mobile UI bars).
`min-h-dvh`	`100dvh`	"Dynamic" viewport (adjusts as UI scrolls).
`min-block-{size}`	Logical Height	Vertical constraints in logical flow.

Container-Relative Sizing

With native container queries, you can now constrain elements based on the parent's size rather than the entire browser window:

Utility	Requirement	Definition
`@container`	On Parent	Creates a containment context for children.
`max-w-@sm`	On Child	Triggers when parent container hits `24rem`.
`max-w-@lg`	On Child	Triggers when parent container hits `32rem`.

Example

The following example demonstrates some of the ways you can size elements using Tailwind:

<!doctype html>
<title>Tailwind CSS Sizing Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 p-8">

<div class="max-w-4xl mx-auto space-y-12">
    
    
    <div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">1. Fixed Width & Height</h3>
      <div class="flex items-end gap-4 p-4 bg-white rounded-lg shadow-sm border border-gray-200 h-48">
        <div class="w-12 h-12 bg-indigo-500 rounded text-white flex items-center justify-center text-[10px]">w-12 h-12</div>
        <div class="w-16 h-24 bg-indigo-500 rounded text-white flex items-center justify-center text-[10px]">w-16 h-24</div>
        <div class="w-24 h-32 bg-indigo-500 rounded text-white flex items-center justify-center text-[10px]">w-24 h-32</div>
        <div class="w-32 h-40 bg-indigo-500 rounded text-white flex items-center justify-center text-[10px]">w-32 h-40</div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">2. Fractional Widths</h3>
      <div class="space-y-4 p-4 bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="w-full bg-emerald-100 p-2 text-emerald-800 text-xs font-bold rounded">w-full</div>
        <div class="w-3/4 bg-emerald-100 p-2 text-emerald-800 text-xs font-bold rounded">w-3/4</div>
        <div class="w-1/2 bg-emerald-100 p-2 text-emerald-800 text-xs font-bold rounded">w-1/2</div>
        <div class="w-1/4 bg-emerald-100 p-2 text-emerald-800 text-xs font-bold rounded">w-1/4</div>
      </div>
    </div>

<div>
      <h3 class="text-lg font-semibold mb-4 text-gray-700">3. Max-Width Constraints</h3>
      <div class="space-y-4">
        <div class="max-w-sm mx-auto bg-purple-500 text-white p-4 rounded-lg shadow-lg text-center font-semibold">
          max-w-sm
        </div>
        <div class="max-w-md mx-auto bg-purple-500 text-white p-4 rounded-lg shadow-lg text-center font-semibold">
          max-w-md
        </div>
      </div>
    </div>

</div>

</body>

View Output

In the next page, we'll look at Tailwind's typography utilities.