0
0
Tailwindmarkup~5 mins

Width utilities in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Width utilities help you quickly set how wide an element should be. This makes your page look neat and organized.

When you want a button to be exactly half the width of its container.
When you need images to have a fixed width on different screen sizes.
When you want to limit the width of text blocks for easier reading.
When you want a box to fill the full width of the screen or container.
When you want to create responsive layouts that adjust width on small or large screens.
Syntax
Tailwind
w-{size}

Examples:
w-4
w-1/2
w-full
w-auto

w- prefix means 'width'.

Sizes can be fixed (like 4, 8), fractions (like 1/2), or keywords (like full, auto).

Examples
This box has a small fixed width.
Tailwind
<div class="w-4 bg-blue-500">Small box</div>
This box takes half the width of its container.
Tailwind
<div class="w-1/2 bg-green-500">Half width box</div>
This box stretches to fill the entire container width.
Tailwind
<div class="w-full bg-red-500">Full width box</div>
This box width fits its content automatically.
Tailwind
<div class="w-auto bg-yellow-500">Auto width box</div>
Sample Program

This page shows four colored boxes with different widths using Tailwind width utilities. You see a small fixed width, one-third width, half width, and full width box side by side.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Width Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="mb-4 text-xl font-bold">Width Utilities Demo</h1>
  <div class="flex gap-4">
    <div class="w-16 h-16 bg-blue-500 text-white flex items-center justify-center">w-16</div>
    <div class="w-1/3 h-16 bg-green-500 text-white flex items-center justify-center">w-1/3</div>
    <div class="w-1/2 h-16 bg-red-500 text-white flex items-center justify-center">w-1/2</div>
    <div class="w-full h-16 bg-yellow-500 text-black flex items-center justify-center">w-full</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use w-auto when you want the element to size itself based on its content.

Fraction widths like w-1/2 work relative to the parent container's width.

Combine width utilities with responsive prefixes like sm:w-full to change width on small screens.

Summary

Width utilities let you control element width easily with simple classes.

You can use fixed sizes, fractions, or keywords like full and auto.

They help create neat, responsive layouts without writing custom CSS.