Tailwind CSS Width

The Width utilities in Tailwind CSS are used to control the width of an element. They are the Tailwind CSS alternatives to the CSS width property. It provides utilities for setting fixed widths, percentage-based and custom width values. These utilities can be applied to elements such as div, images, buttons, and other HTML elements.

Width Classes

Tailwind CSS provides the following types of width utilities:

Class	Description
`w-<number>`	Sets the width using the spacing scale.
`w-px`	Sets the width to `1px`.
`w-<fraction>`	Sets the width as a percentage of the parent element.
`w-3xs` to `w-7xl`	Sets the width using the container scale.
`w-auto`	Sets the width to `auto`.
`w-full`	Sets the width to `100%` of the parent element.
`w-screen`	Sets the width to `100vw`.
`w-svw`	Sets the width to `100svw`.
`w-lvw`	Sets the width to `100lvw`.
`w-dvw`	Sets the width to `100dvw`.
`w-min`	Sets the width to `min-content`.
`w-max`	Sets the width to `max-content`.
`w-fit`	Sets the width to `fit-content`.
`w-(<custom-property>)`	Sets the width using a CSS custom property.
`w-[<value>]`	Sets the width using a custom value.

Syntax

<element class="w-<value>">...</element>

1. Using `w-<number>`

The w-<number> utility sets the width using Tailwind CSS's spacing scale. For example, w-4 sets the width to 1rem and w-16 sets it to 4rem.

HTML

<div class="w-16 bg-green-500 p-4 text-white">
    w-16
</div>

<div class="w-32 bg-green-600 p-4 text-white">
    w-32
</div>

<div class="w-64 bg-green-700 p-4 text-white">
    w-64
</div>

2. Using `w-px`

The w-px utility sets the width of an element to 1px.

<div class="w-px h-12 bg-green-600"></div>

This utility is useful when a very small fixed width is required.

3. Using Fractional Widths

Tailwind CSS provides fractional width utilities for setting the width as a percentage of the parent element. Common examples include:

w-1/2 → 50%
w-1/3 → 33.333333%
w-2/3 → 66.666667%
w-1/4 → 25%
w-3/4 → 75%
w-1/5 → 20%
w-2/5 → 40%
w-3/5 → 60%
w-4/5 → 80%
w-1/6 → 16.666667%
w-5/6 → 83.333333%
w-1/12 → 8.333333%

For example:

HTML

<div class="flex gap-2">
    <div class="w-1/2 bg-green-600 p-4 text-white">
        w-1/2
    </div>

    <div class="w-1/2 bg-green-300 p-4">
        w-1/2
    </div>
</div>

4. Using Container-Based Widths

Tailwind CSS also provides width utilities based on its container scale.

w-3xs
w-2xs
w-xs
w-sm
w-md
w-lg
w-xl
w-2xl
w-3xl
w-4xl
w-5xl
w-6xl
w-7xl

For example:

HTML

<div class="w-xs bg-green-300 p-4">
    w-xs
</div>

<div class="w-md bg-green-500 p-4 text-white">
    w-md
</div>

<div class="w-xl bg-green-700 p-4 text-white">
    w-xl
</div>

These utilities use predefined values from Tailwind's container scale. For example, w-xs is 20rem, w-md is 28rem, and w-xl is 36rem.

5. Using `w-auto`

The w-auto utility sets the width to auto.

<div class="w-auto bg-green-500 p-4 text-white">
    w-auto
</div>

This is useful when the width should be determined automatically by the browser.

<div class="w-full md:w-auto bg-green-500 p-4 text-white">
    Responsive Width
</div>

In this example, the element uses the full available width by default and changes to auto at the md breakpoint.

6. Using `w-full`

The w-full utility sets the width to 100% of the parent element.

<div class="w-full bg-green-600 p-4 text-white">
    w-full
</div>

This is commonly used for elements that should occupy all the available width of their parent.

7. Using `w-screen`

The w-screen utility sets the width to 100vw, which represents the width of the viewport.

<div class="w-screen bg-green-600 p-4 text-white">
    w-screen
</div>

Unlike w-full, which uses the width of the containing block, w-screen uses the viewport width.

8. Using `w-svw`, `w-lvw`, and `w-dvw`

Tailwind CSS also provides utilities for the small, large, and dynamic viewport widths.

Class	CSS
`w-svw`	`width: 100svw;`
`w-lvw`	`width: 100lvw;`
`w-dvw`	`width: 100dvw;`

Example:

HTML

<div class="w-svw bg-green-300 p-4">
    Small Viewport Width
</div>

<div class="w-lvw bg-green-500 p-4 text-white">
    Large Viewport Width
</div>

<div class="w-dvw bg-green-700 p-4 text-white">
    Dynamic Viewport Width
</div>

These utilities are useful when working with the different viewport units provided by modern CSS.

9. Using `w-min`

The w-min utility sets the width to min-content.

<div class="w-min bg-green-500 p-4 text-white">
    w-min
</div>

The min-content value makes the element as narrow as possible while still accommodating its content according to CSS sizing rules.

10. Using `w-max`

The w-max utility sets the width to max-content.

<div class="w-max bg-green-500 p-4 text-white">
    This element uses w-max
</div>

It allows the element to use the maximum width required by its content without wrapping where possible.

11. Using `w-fit`

The w-fit utility sets the width to fit-content.

<div class="w-fit bg-green-500 p-4 text-white">
    w-fit
</div>

This allows the element to size itself according to its content while respecting the available space.

12. Using Custom Width Values

Tailwind CSS allows completely custom width values using square brackets.

The syntax is:

<element class="w-[<value>]">...</element>

For example:

<div class="w-[350px] bg-green-600 p-4 text-white">
    Custom Width: 350px
</div>

You can use any valid CSS width value:

HTML

<div class="w-[350px] bg-green-600 p-4 text-white">
    350px
</div>

<div class="w-[75%] bg-green-500 p-4 text-white">
    75%
</div>

<div class="w-[20rem] bg-green-700 p-4 text-white">
    20rem
</div>

The w-[<value>] syntax is useful when the required width does not exist in Tailwind's default theme.

13. Using CSS Custom Properties

You can use a CSS custom property with the w-(<custom-property>) syntax.

HTML

<div style="--my-width: 300px;">
    <div class="w-(--my-width) bg-green-600 p-4 text-white">
        Custom Property Width
    </div>
</div>

The w-(--my-width) syntax is a shorthand for:

w-[var(--my-width)]

Tailwind automatically adds the var() function when using the custom-property syntax.

14. Responsive Width

Width utilities can be combined with responsive breakpoint prefixes such as sm:, md:, lg:, xl:, and 2xl:.

For example:

<div class="w-full md:w-1/2 lg:w-1/3 bg-green-600 p-4 text-white">
    Responsive Width
</div>

In this example:

On smaller screens, the element has w-full.
At the md breakpoint and above, it has w-1/2.
At the lg breakpoint and above, it has w-1/3.

Example: The following example demonstrates several Tailwind CSS width utilities:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Tailwind CSS Width</title>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-6">
    <h1 class="mb-4 text-center text-4xl font-bold text-green-600">
        GeeksforGeeks
    </h1>
    <p class="mb-6 text-center font-bold">
        Tailwind CSS Width Utilities
    </p>
    <div class="space-y-4">
        <!-- Numeric Width -->
        <div class="w-32 rounded bg-green-600 p-4 text-white">
            w-32
        </div>
        <!-- Fractional Width -->
        <div class="flex gap-2">
            <div class="w-1/2 rounded bg-green-600 p-4 text-white">
                w-1/2
            </div>
            <div class="w-1/2 rounded bg-green-300 p-4">
                w-1/2
            </div>
        </div>
        <!-- Full Width -->
        <div class="w-full rounded bg-green-500 p-4 text-white">
            w-full
        </div>
        <!-- Screen Width -->
        <div class="w-screen rounded bg-green-700 p-4 text-white">
            w-screen
        </div>
        <!-- Minimum Content Width -->
        <div class="w-min rounded bg-green-400 p-4">
            w-min
        </div>
        <!-- Maximum Content Width -->
        <div class="w-max rounded bg-green-500 p-4 text-white">
            This element uses w-max
        </div>
        <!-- Fit Content Width -->
        <div class="w-fit rounded bg-green-600 p-4 text-white">
            w-fit
        </div>
        <!-- Custom Width -->
        <div class="w-[350px] rounded bg-green-700 p-4 text-white">
            w-[350px]
        </div>
        <!-- Container Width -->
        <div class="w-md rounded bg-green-500 p-4 text-white">
            w-md
        </div>
        <!-- Small Viewport Width -->
        <div class="w-svw rounded bg-green-400 p-4">
            w-svw
        </div>
        <!-- Large Viewport Width -->
        <div class="w-lvw rounded bg-green-600 p-4 text-white">
            w-lvw
        </div>
        <!-- Dynamic Viewport Width -->
        <div class="w-dvw rounded bg-green-700 p-4 text-white">
            w-dvw
        </div>
        <!-- Responsive Width -->
        <div class="w-full rounded bg-green-800 p-4 text-white md:w-1/2 lg:w-1/3">
            Responsive Width
        </div>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Width Classes

Syntax

1. Using w-<number>

2. Using w-px

3. Using Fractional Widths

4. Using Container-Based Widths

5. Using w-auto

6. Using w-full

7. Using w-screen

8. Using w-svw, w-lvw, and w-dvw

9. Using w-min

10. Using w-max

11. Using w-fit

12. Using Custom Width Values

13. Using CSS Custom Properties

14. Responsive Width

Explore

1. Using `w-<number>`

2. Using `w-px`

5. Using `w-auto`

6. Using `w-full`

7. Using `w-screen`

8. Using `w-svw`, `w-lvw`, and `w-dvw`

9. Using `w-min`

10. Using `w-max`

11. Using `w-fit`