width
Utilities for setting the width of an element.
| Utility | Styles |
|---|---|
w[*<value>*] | width: calc(var(--spacing) * *<number>*); |
w.auto | width: auto; |
w['1px'] | width: 1px; |
w['100%'] | width: 100%; |
w['100vw'] | width: 100vw; |
w['100dvw'] | width: 100dvw; |
w['100dvh'] | width: 100dvh; |
w['100lvw'] | width: 100lvw; |
w['100lvh'] | width: 100lvh; |
w['100svw'] | width: 100svw; |
w['100svh'] | width: 100svh; |
w.min | width: min-content; |
w.max | width: max-content; |
w.fit | width: fit-content; |
size[*<value>*] | width: calc(var(--spacing) * *<number>*);height: calc(var(--spacing) * *<number>*); |
size.auto | width: auto;height: auto; |
size.px | width: 1px;height: 1px; |
size.full | width: 100%;height: 100%; |
size.dvw | width: 100dvw;height: 100dvw; |
size.dvh | width: 100dvh;height: 100dvh; |
size.lvw | width: 100lvw;height: 100lvw; |
size.lvh | width: 100lvh;height: 100lvh; |
size.svw | width: 100svw;height: 100svw; |
size.svh | width: 100svh;height: 100svh; |
size.min | width: min-content;height: min-content; |
size.max | width: max-content;height: max-content; |
size.fit | width: fit-content;height: fit-content; |