Max Width

Limit the maximum width of an element.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:max-w-(value)
Small≥640px
md:max-w-(value)
Medium≥768px
lg:max-w-(value)
Large≥1024px
xxl:max-w-(value)
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:max-w-(value)