Skip to content

Tailwind CSS - Size

Tailwind CSS - Size

The size-* utility, introduced in Tailwind CSS v3.2, is a convenient shorthand for setting an element’s width and height simultaneously. It’s perfect for creating uniformly-sized elements like avatars, icons, or color swatches.

Size Utility Classes

The size-* classes accept the same values as the w-* (width) and h-* (height) utilities, including numeric scale values, fractions, and keywords.

Class	CSS Properties	Common Use Case
`size-0`	`width: 0px; height: 0px;`	Collapsing an element completely.
`size-px`	`width: 1px; height: 1px;`	Creating a 1-pixel dot or thin border.
`size-4`	`width: 1rem; height: 1rem;`	Sizing a small icon (16x16px).
`size-16`	`width: 4rem; height: 4rem;`	Sizing a medium avatar (64x64px).
`size-1/2`	`width: 50%; height: 50%;`	Making an element half the size of its parent.
`size-full`	`width: 100%; height: 100%;`	Making an element fill its parent container.
`size-auto`	`width: auto; height: auto;`	Letting the browser determine the size based on content.
`size-min`	`width: min-content; height: min-content;`	Shrinking an element to its minimum intrinsic size.
`size-max`	`width: max-content; height: max-content;`	Expanding an element to its maximum intrinsic size.
`size-fit`	`width: fit-content; height: fit-content;`	Sizing an element to fit its content, up to the available space.

Practical Application: Building a UI Profile Component

The size utility shines when creating components that require square elements. In this example, we’ll build a user profile card with a perfectly square avatar and status indicator.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Size Utility</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">

  <div class="bg-white p-6 rounded-lg shadow-lg flex items-center space-x-4">
    <!-- Avatar Container -->
    <div class="relative flex-shrink-0">
      <!-- Avatar Image -->
      <img class="size-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200" alt="User avatar">
      <!-- Status Indicator -->
      <span class="absolute bottom-0 right-0 block size-4 bg-green-500 border-2 border-white rounded-full"></span>
    </div>
    <div>
      <p class="text-xl font-bold text-gray-900">Jane Doe</p>
      <p class="text-gray-600">Software Engineer</p>
    </div>
  </div>

</body>
</html>

Responsive Sizing

Like all Tailwind utilities, size can be applied responsively. This is useful for creating elements that change size on different devices. For instance, a logo might be smaller on mobile and larger on desktop.

<!-- This div will be 24x24 on mobile, 32x32 on medium screens, and 40x40 on large screens -->
<div class="size-24 md:size-32 lg:size-40 bg-blue-500 rounded-lg"></div>

Arbitrary Values and Customization

For non-standard sizes, you can use arbitrary values directly in your HTML. For sizes you reuse often, it’s best to add them to your tailwind.config.js.

Arbitrary Value Example

<!-- A perfect 100x100px square -->
<div class="size-[100px] bg-red-500"></div>

Configuration Example

module.exports = {
  theme: {
    extend: {
      // This adds a `size-card` utility
      size: {
        'card': '350px',
      }
    }
  }
}

When to Use `size` vs. `w` and `h`

Use size for square elements: It’s cleaner and more expressive for avatars, icons, checkboxes, and other uniformly-sized UI.
Use w-* and h-* for rectangular elements: When width and height differ, stick to the individual utilities (e.g., w-full h-64 for a banner).