Bird
Raised Fist0
Tailwindmarkup~5 mins

Width utilities in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. Which Tailwind class sets an element's width to 100% of its parent container?
easy
A. w-full
B. w-auto
C. w-1/2
D. w-0

Solution

  1. Step 1: Understand the meaning of w-full

    The class w-full sets the width to 100% of the parent container.

  2. Step 2: Compare with other options

    w-auto lets width adjust to content, w-1/2 sets width to 50%, and w-0 sets width to zero.

  3. Final Answer:

    w-full -> Option A

  4. Quick Check:

    Full width = w-full [OK]
Hint: Full width always uses w-full class [OK]
Common Mistakes:
  • Confusing w-auto with full width
  • Thinking w-1/2 means full width
  • Using w-0 expecting full width
2. Which of these is the correct Tailwind class to set an element's width to 25%?
easy
A. w-1/4
B. w-1/3
C. w-1/2
D. w-3/4

Solution

  1. Step 1: Recall fraction width classes in Tailwind

    w-1/4 means width is 1/4 or 25% of the parent container.

  2. Step 2: Verify other options

    w-1/3 is about 33%, w-1/2 is 50%, and w-3/4 is 75% width.

  3. Final Answer:

    w-1/4 -> Option A

  4. Quick Check:

    25% width = w-1/4 [OK]
Hint: Fraction classes use w-1/4, w-1/2, etc. [OK]
Common Mistakes:
  • Mixing up w-1/3 with 25%
  • Using w-3/4 expecting 25%
  • Forgetting fraction syntax
3. What width will the following element have?
<div class="w-3/5">Content</div>
medium
A. 75% of the parent container
B. 50% of the parent container
C. 60% of the parent container
D. 100% of the parent container

Solution

  1. Step 1: Understand the class w-3/5

    This class sets the width to 3 parts out of 5, which is 60% of the parent container.

  2. Step 2: Compare with other options

    50% is w-1/2, 75% is w-3/4, and 100% is w-full.

  3. Final Answer:

    60% of the parent container -> Option C

  4. Quick Check:

    w-3/5 = 60% width [OK]
Hint: Divide numerator by denominator in fraction class [OK]
Common Mistakes:
  • Assuming w-3/5 means 3%
  • Confusing with w-1/2
  • Ignoring fraction meaning
4. Identify the error in this Tailwind width usage:
<div class="w-7/3">Box</div>
medium
A. Fraction denominator cannot be greater than numerator
B. Fraction denominator cannot be zero
C. Fraction numerator cannot be greater than denominator
D. Tailwind does not support fractions greater than 1

Solution

  1. Step 1: Analyze the fraction 7/3 in Tailwind width

    Tailwind width fractions represent parts of the parent width and must be between 0 and 1 (numerator ≤ denominator).

  2. Step 2: Check Tailwind support for fractions > 1

    Tailwind does not support fractions greater than 1 for width utilities; w-7/3 is invalid.

  3. Final Answer:

    Tailwind does not support fractions greater than 1 -> Option D

  4. Quick Check:

    Width fractions must be ≤ 1 [OK]
Hint: Width fractions must be ≤ 1 in Tailwind [OK]
Common Mistakes:
  • Thinking numerator must be less than denominator
  • Assuming denominator can't be zero (not relevant here)
  • Using invalid fraction > 1
5. You want a responsive layout where a box is full width on small screens but 1/3 width on medium and larger screens. Which Tailwind classes achieve this?
<div class="?">Box</div>
hard
A. w-1/3 md:w-full
B. w-full md:w-1/3
C. w-auto md:w-1/3
D. w-1/3 w-full

Solution

  1. Step 1: Understand responsive prefixes in Tailwind

    md: prefix applies styles at medium screen sizes and above.

  2. Step 2: Set full width by default and 1/3 width on medium screens

    Use w-full for small screens and md:w-1/3 for medium+ screens.

  3. Final Answer:

    w-full md:w-1/3 -> Option B

  4. Quick Check:

    Default full, medium 1/3 = w-full md:w-1/3 [OK]
Hint: Use responsive prefix like md: for screen size changes [OK]
Common Mistakes:
  • Reversing order of widths
  • Not using responsive prefix
  • Using w-auto instead of fixed width