inline-size utility class reference
The inline-size utilities set the CSS inline-size property. Available utilities include: inline-<number> (applies calc(var(--spacing) * <number>)), inline-<fraction> (applies calc(<fraction> * 100%)), inline-3xs through inline-7xl (use container scale variables like var(--container-3xs) for 16rem/256px through var(--container-7xl) for 80rem/1280px), inline-auto (applies auto), inline-px (applies 1px), inline-full (applies 100%), inline-screen (applies 100vw), inline-dvw (applies 100dvw), inline-dvh (applies 100dvh), inline-lvw (applies 100lvw), inline-lvh (applies 100lvh), inline-svw (applies 100svw), inline-svh (applies 100svh), inline-min (applies min-content), inline-max (applies max-content), inline-fit (applies fit-content), inline-(<custom-property>) (applies var(<custom-property>)), and inline-[<value>] (applies arbitrary values).
inline-3xs through inline-7xl container scale values
Container-based inline-size utilities use the following CSS variable values: inline-3xs = 16rem (256px), inline-2xs = 18rem (288px), inline-xs = 20rem (320px), inline-sm = 24rem (384px), inline-md = 28rem (448px), inline-lg = 32rem (512px), inline-xl = 36rem (576px), inline-2xl = 42rem (672px), inline-3xl = 48rem (768px), inline-4xl = 56rem (896px), inline-5xl = 64rem (1024px), inline-6xl = 72rem (1152px), inline-7xl = 80rem (1280px).
inline-<number> utility spacing scale
The inline-<number> utilities like inline-24, inline-32, inline-40, inline-48, inline-64, inline-80, and inline-96 set fixed inline sizes based on the spacing scale using calc(var(--spacing) * <number>).
inline-<fraction> percentage utilities
Fraction-based inline-size utilities like inline-1/2, inline-1/3, inline-2/3, inline-2/5, and inline-3/5 apply percentage-based widths calculated as calc(<fraction> * 100%).
inline-full and inline-screen viewport utilities
The inline-full utility sets inline-size to 100%, making an element span its full container width. The inline-screen utility sets inline-size to 100vw, making an element span the entire inline size of the viewport.
inline-auto to reset inline size
The inline-auto utility removes an element's assigned inline size, setting it to auto. This is useful for overriding an inline-size under specific conditions, such as at a particular breakpoint, for example md:inline-auto to reset at medium breakpoint and above.
arbitrary inline-size values
Custom inline-size values can be applied using inline-[<value>] syntax for arbitrary values, or inline-(<custom-property>) syntax to reference custom CSS properties.
max-inline utility class reference
The max-inline utility sets the maximum inline size of an element. Classes include: max-inline-<number> (calc(var(--spacing) * <number>)), max-inline-<fraction> (calc(<fraction> * 100%)), max-inline-3xs (16rem/256px), max-inline-2xs (18rem/288px), max-inline-xs (20rem/320px), max-inline-sm (24rem/384px), max-inline-md (28rem/448px), max-inline-lg (32rem/512px), max-inline-xl (36rem/576px), max-inline-2xl (42rem/672px), max-inline-3xl (48rem/768px), max-inline-4xl (56rem/896px), max-inline-5xl (64rem/1024px), max-inline-6xl (72rem/1152px), max-inline-7xl (80rem/1280px), max-inline-none (none), max-inline-px (1px), max-inline-full (100%), max-inline-dvw (100dvw), max-inline-dvh (100dvh), max-inline-lvw (100lvw), max-inline-lvh (100lvh), max-inline-svw (100svw), max-inline-svh (100svh), max-inline-screen (100vw), max-inline-min (min-content), max-inline-max (max-content), max-inline-fit (fit-content), max-inline-(<custom-property>) (var(<custom-property>)), max-inline-[<value>] (<value>).
max-inline with spacing scale numbers
max-inline-<number> utilities like max-inline-24, max-inline-40, max-inline-48, max-inline-64, max-inline-80, and max-inline-96 set fixed maximum inline sizes based on the spacing scale.
max-inline with fractions
max-inline-<fraction> utilities like max-inline-1/3, max-inline-1/2, max-inline-3/4, and max-inline-9/10 set percentage-based maximum inline sizes.
max-inline with container scale
max-inline-sm, max-inline-md, max-inline-lg, max-inline-xl and other container scale utilities set maximum inline sizes based on predefined container size values.
max-inline arbitrary values
max-inline-[<value>] syntax allows arbitrary custom values for maximum inline size, and max-inline-(<custom-property>) allows using custom CSS properties.
max-inline responsive design
max-inline utilities support responsive design variants, allowing different maximum inline sizes at different breakpoints.