w-<number> utility syntax
Width utilities using w-<number> syntax apply width using the formula width: calc(var(--spacing) * <number>);. For example, w-24 and w-64 set an element to a fixed width based on the spacing scale.
Tailwind CSS v4 · all subjects
utilities/width
15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
w-<fraction> utility syntax
Width utilities using w-<fraction> syntax apply width using the formula width: calc(<fraction> * 100%);. Examples include w-1/2, w-1/3, w-2/3, w-1/4, w-3/4, w-1/5, w-4/5, w-1/6, and w-5/6.
w-<size> container scale utilities
Container-scale width utilities are: w-3xs (16rem/256px), w-2xs (18rem/288px), w-xs (20rem/320px), w-sm (24rem/384px), w-md (28rem/448px), w-lg (32rem/512px), w-xl (36rem/576px), w-2xl (42rem/672px), w-3xl (48rem/768px), w-4xl (56rem/896px), w-5xl (64rem/1024px), w-6xl (72rem/1152px), w-7xl (80rem/1280px). They use the CSS variables var(--container-<size>).
w-auto, w-px, w-full, w-screen utilities
Additional width utilities: w-auto (width: auto;), w-px (width: 1px;), w-full (width: 100%;), w-screen (width: 100vw;).
Viewport units width utilities
Width utilities for different viewport units: w-dvw (width: 100dvw;), w-dvh (width: 100dvh;), w-lvw (width: 100lvw;), w-lvh (width: 100lvh;), w-svw (width: 100svw;), w-svh (width: 100svh;). dvw/dvh are dynamic viewport units, lvw/lvh are large viewport units, svw/svh are small viewport units.
w-min, w-max, w-fit utilities
Content-based width utilities: w-min (width: min-content;), w-max (width: max-content;), w-fit (width: fit-content;).
w-(<custom-property>) arbitrary custom property syntax
The w-(<custom-property>) syntax allows referencing a custom CSS property: width: var(<custom-property>);.
w-[<value>] arbitrary value syntax
The w-[<value>] syntax allows arbitrary width values: width: <value>;. For example, w-[5px] sets width to 5px.
size-<number> utility sets width and height
Size utilities using size-<number> syntax apply both width and height using the formula width: calc(var(--spacing) * <number>); height: calc(var(--spacing) * <number>);.
size-<fraction> utility sets width and height
Size utilities using size-<fraction> syntax apply both width and height using the formula width: calc(<fraction> * 100%); height: calc(<fraction> * 100%);.
size-auto, size-px, size-full utilities
Size utilities that set both width and height: size-auto (width: auto; height: auto;), size-px (width: 1px; height: 1px;), size-full (width: 100%; height: 100%;).
size viewport unit utilities
Size utilities for viewport units that set both width and height: 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, size-max, size-fit utilities
Content-based size utilities that set both width and height: size-min (width: min-content; height: min-content;), size-max (width: max-content; height: max-content;), size-fit (width: fit-content; height: fit-content;).
size-(<custom-property>) arbitrary custom property syntax
The size-(<custom-property>) syntax allows referencing a custom CSS property for both width and height: width: var(<custom-property>); height: var(<custom-property>);.
size-[<value>] arbitrary value syntax
The size-[<value>] syntax allows arbitrary width and height values: width: <value>; height: <value>;.