Min Width

Set the minimum width of an element.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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