Width

Set the width for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

w-0
width: 0;
w-1
width: .25rem;
w-2
width: .5rem;
w-3
width: .75rem;
w-4
width: 1rem;
w-5
width: 1.25rem;
w-6
width: 1.5rem;
w-7
width: 1.75rem;
w-8
width: 2rem;
w-9
width: 2.25rem;
w-10
width: 2.5rem;
w-11
width: 2.75rem;
w-12
width: 3rem;
w-13
width: 3.25rem;
w-14
width: 3.5rem;
w-15
width: 3.75rem;
w-16
width: 4rem;
w-17
width: 4.25rem;
w-18
width: 4.5rem;
w-19
width: 4.75rem;
w-20
width: 5rem;
w-21
width: 5.25rem;
w-22
width: 5.5rem;
w-23
width: 5.75rem;
w-24
width: 6rem;
w-25
width: 6.25rem;
w-26
width: 6.5rem;
w-27
width: 6.75rem;
w-28
width: 7rem;
w-29
width: 7.25rem;
w-30
width: 7.5rem;
w-31
width: 7.75rem;
w-32
width: 8rem;
w-33
width: 8.25rem;
w-34
width: 8.5rem;
w-35
width: 8.75rem;
w-36
width: 9rem;
w-37
width: 9.25rem;
w-38
width: 9.5rem;
w-39
width: 9.75rem;
w-40
width: 10rem;
w-41
width: 10.25rem;
w-42
width: 10.5rem;
w-43
width: 10.75rem;
w-44
width: 11rem;
w-45
width: 11.25rem;
w-46
width: 11.5rem;
w-47
width: 11.75rem;
w-48
width: 12rem;
w-49
width: 12.25rem;
w-50
width: 12.5rem;
w-51
width: 12.75rem;
w-52
width: 13rem;
w-53
width: 13.25rem;
w-54
width: 13.5rem;
w-55
width: 13.75rem;
w-56
width: 14rem;
w-57
width: 14.25rem;
w-58
width: 14.5rem;
w-59
width: 14.75rem;
w-60
width: 15rem;
w-61
width: 15.25rem;
w-62
width: 15.5rem;
w-63
width: 15.75rem;
w-64
width: 16rem;
w-65
width: 16.25rem;
w-66
width: 16.5rem;
w-67
width: 16.75rem;
w-68
width: 17rem;
w-69
width: 17.25rem;
w-70
width: 17.5rem;
w-71
width: 17.75rem;
w-72
width: 18rem;
w-73
width: 18.25rem;
w-74
width: 18.5rem;
w-75
width: 18.75rem;
w-76
width: 19rem;
w-77
width: 19.25rem;
w-78
width: 19.5rem;
w-79
width: 19.75rem;
w-80
width: 20rem;
w-81
width: 20.25rem;
w-82
width: 20.5rem;
w-83
width: 20.75rem;
w-84
width: 21rem;
w-85
width: 21.25rem;
w-86
width: 21.5rem;
w-87
width: 21.75rem;
w-88
width: 22rem;
w-89
width: 22.25rem;
w-90
width: 22.5rem;
w-91
width: 22.75rem;
w-92
width: 23rem;
w-93
width: 23.25rem;
w-94
width: 23.5rem;
w-95
width: 23.75rem;
w-96
width: 24rem;
w-97
width: 24.25rem;
w-98
width: 24.5rem;
w-99
width: 24.75rem;
w-100
width: 25rem;
w-auto
width: auto;
w-dvh
width: 100dvh;
w-dvw
width: 100dvw;
w-vh
width: 100vh;
w-vw
width: 100vw;
w-vi
width: 100vi;
w-vb
width: 100vb;
w-svh
width: 100svh;
w-svw
width: 100svw;
w-lvh
width: 100lvh;
w-lvw
width: 100lvw;
w-vmin
width: 100vmin;
w-vmax
width: 100vmax;
w-fc
width: fit-content;
w-full
width: 100%;
w-half
width: 50%;
w-max
width: max-content;
w-min
width: min-content;
w-px
width: 1px;
w-s
width: stretch;
w-sm
width: 40rem;
w-md
width: 48rem;
w-lg
width: 64rem;
w-xl
width: 80rem;
w-xxl
width: 96rem;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:w-*
Small≥640px
md:w-*
Medium≥768px
lg:w-*
Large≥1024px
xxl:w-*
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:w-*

Negative Values

Use negative variants to apply negative width values.

Use the -- syntax to apply negative numeric values.

Syntax:w--*