utilities/flex-basis — Tailwind CSS v4

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

flex-basis utility classes API reference

The flex-basis utilities in Tailwind CSS v4 are: basis-<number> generates flex-basis: calc(var(--spacing) * <number>); basis-<fraction> generates flex-basis: calc(<fraction> * 100%); basis-full generates flex-basis: 100%; basis-auto generates flex-basis: auto; basis-px generates flex-basis: 1px; basis-3xs generates flex-basis: var(--container-3xs) which is 16rem (256px); basis-2xs generates flex-basis: var(--container-2xs) which is 18rem (288px); basis-xs generates flex-basis: var(--container-xs) which is 20rem (320px); basis-sm generates flex-basis: var(--container-sm) which is 24rem (384px); basis-md generates flex-basis: var(--container-md) which is 28rem (448px); basis-lg generates flex-basis: var(--container-lg) which is 32rem (512px); basis-xl generates flex-basis: var(--container-xl) which is 36rem (576px); basis-2xl generates flex-basis: var(--container-2xl) which is 42rem (672px); basis-3xl generates flex-basis: var(--container-3xl) which is 48rem (768px); basis-4xl generates flex-basis: var(--container-4xl) which is 56rem (896px); basis-5xl generates flex-basis: var(--container-5xl) which is 64rem (1024px); basis-6xl generates flex-basis: var(--container-6xl) which is 72rem (1152px); basis-7xl generates flex-basis: var(--container-7xl) which is 80rem (1280px); basis-(<custom-property>) generates flex-basis: var(<custom-property>); basis-[<value>] generates flex-basis: <value>;

Using spacing scale for flex-basis

Flex basis utilities like basis-64 and basis-128 set the initial size of flex items based on the spacing scale. These use the formula flex-basis: calc(var(--spacing) * <number>).

Using container scale for flex-basis

Flex basis utilities like basis-xs, basis-sm, basis-md, basis-lg, and basis-xl set the initial size of flex items based on the container scale. For example: basis-3xs is 16rem (256px), basis-2xs is 18rem (288px), basis-xs is 20rem (320px), basis-sm is 24rem (384px).

Using fractions for flex-basis

Fraction-based flex basis utilities like basis-1/2 and basis-2/3 set the initial size as a percentage of the parent. These use the formula flex-basis: calc(<fraction> * 100%).

Responsive design with flex-basis

Flex basis utilities support responsive prefixes like md:basis-1/3 to change the flex-basis at different breakpoints.