w-<number> utility
The w-<number> utility sets width using the spacing scale. The CSS produced is width: calc(var(--spacing) * <number>);
Tailwind CSS · Utilities reference · all subjects
width
19 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
The w-<fraction> utility sets width as a percentage of the parent element. The CSS produced is width: calc(<fraction> * 100%);
Container scale width utilities
The following width utilities are based on the container scale: 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).
w-auto utility
The w-auto utility sets width: auto; and is used to remove an element's assigned width under specific conditions, such as at a particular breakpoint.
w-px utility
The w-px utility sets width: 1px;
w-full utility
The w-full utility sets width: 100%;
w-screen utility
The w-screen utility sets width: 100vw; and makes an element span the entire width of the viewport.
w-min, w-max, w-fit utilities
The w-min utility sets width: min-content; The w-max utility sets width: max-content; The w-fit utility sets width: fit-content;
w-(<custom-property>) utility
The w-(<custom-property>) utility sets width: var(<custom-property>); allowing you to reference a custom CSS property for width.
w-[<value>] arbitrary value utility
The w-[<value>] utility sets width: <value>; allowing you to use arbitrary CSS values for width.
size-<number> utility
The size-<number> utility sets both width and height using the spacing scale. The CSS produced is width: calc(var(--spacing) * <number>); and height: calc(var(--spacing) * <number>);
size-<fraction> utility
The size-<fraction> utility sets both width and height as percentages. The CSS produced is width: calc(<fraction> * 100%); and height: calc(<fraction> * 100%);
size-auto, size-px, size-full utilities
The size-auto utility sets width: auto; and height: auto; The size-px utility sets width: 1px; and height: 1px; The size-full utility sets width: 100%; and height: 100%;
Dynamic viewport size utilities
The size-dvw utility sets width: 100dvw; and height: 100dvw; The size-dvh utility sets width: 100dvh; and height: 100dvh; The size-lvw utility sets width: 100lvw; and height: 100lvw; The size-lvh utility sets width: 100lvh; and height: 100lvh; The size-svw utility sets width: 100svw; and height: 100svw; The size-svh utility sets width: 100svh; and height: 100svh;
size-min, size-max, size-fit utilities
The size-min utility sets width: min-content; and height: min-content; The size-max utility sets width: max-content; and height: max-content; The size-fit utility sets width: fit-content; and height: fit-content;
size-(<custom-property>) utility
The size-(<custom-property>) utility sets width: var(<custom-property>); and height: var(<custom-property>); allowing you to reference a custom CSS property for both dimensions.
size-[<value>] arbitrary value utility
The size-[<value>] utility sets width: <value>; and height: <value>; allowing you to use arbitrary CSS values for both dimensions.
Width utilities are responsive
Width utilities support responsive design variants. For example, w-full md:w-auto applies w-full by default and w-auto at the md breakpoint and above.
Width and size utilities use spacing scale in customization
The w and size utilities can be customized by modifying the spacing scale in your theme configuration.