Width

Use width utilities to set an element’s width using the spacing scale, fractional percentages, the container scale, or viewport units. Tailwind v4 ships numeric (w-<number>), fractional (w-1/2, w-2/3, …), container-scale (w-3xs … w-7xl), and viewport (w-screen, w-svw/w-lvw/w-dvw) variants on a single resolver.

Basic example

Use w-<number> utilities like w-24 and w-64 to set an element to a fixed width based on the spacing scale.

Style('w-96 ...', child: Text('w-96'))
Style('w-80 ...', child: Text('w-80'))
Style('w-64 ...', child: Text('w-64'))
Style('w-48 ...', child: Text('w-48'))
Style('w-40 ...', child: Text('w-40'))
Style('w-32 ...', child: Text('w-32'))
Style('w-24 ...', child: Text('w-24'))

Using a percentage

Use w-full or w-<fraction> utilities like w-1/2 and w-2/5 to give an element a percentage-based width. Fractions render via Flutter’s FractionallySizedBox against the parent’s available width.

Style('flex ...', children: [
  Style('w-1/2 ...', child: Text('w-1/2')),
  Style('w-1/2 ...', child: Text('w-1/2')),
])
Style('flex ...', children: [
  Style('w-2/5 ...', child: Text('w-2/5')),
  Style('w-3/5 ...', child: Text('w-3/5')),
])
Style('flex ...', children: [
  Style('w-1/3 ...', child: Text('w-1/3')),
  Style('w-2/3 ...', child: Text('w-2/3')),
])
Style('flex ...', children: [
  Style('w-1/4 ...', child: Text('w-1/4')),
  Style('w-3/4 ...', child: Text('w-3/4')),
])
Style('flex ...', children: [
  Style('w-1/5 ...', child: Text('w-1/5')),
  Style('w-4/5 ...', child: Text('w-4/5')),
])
Style('flex ...', children: [
  Style('w-1/6 ...', child: Text('w-1/6')),
  Style('w-5/6 ...', child: Text('w-5/6')),
])
Style('w-full ...', child: Text('w-full'))

Using the container scale

Use utilities like w-sm and w-xl to set an element to a fixed width based on the container scale. The same 3xs–7xl keys are also available on min-w-* and max-w-*.

Style('w-xl ...', child: Text('w-xl'))
Style('w-lg ...', child: Text('w-lg'))
Style('w-md ...', child: Text('w-md'))
Style('w-sm ...', child: Text('w-sm'))
Style('w-xs ...', child: Text('w-xs'))
Style('w-2xs ...', child: Text('w-2xs'))
Style('w-3xs ...', child: Text('w-3xs'))

Matching the viewport

Use the w-screen utility to make an element span the entire width of the viewport:

Style('w-screen', child: /* ... */)

Alternatively, you can match the width of the large, small, or dynamic viewports using the w-lvw, w-svw, and w-dvw utilities. In Flutter all four collapse to a single MediaQuery.sizeOf(context).width read at render time — there is no static / large / dynamic viewport distinction.

Resetting the width

Use the w-auto utility to remove an element’s assigned width under a specific condition, like at a particular breakpoint:

Style('w-full md:w-auto', child: /* ... */)

Setting both width and height

Use utilities like size-px, size-4, and size-full to set both the width and height of an element at the same time. Fractional size-<n>/<m> is also supported.

Style('size-16 ...', child: Text('size-16'))
Style('size-20 ...', child: Text('size-20'))
Style('size-24 ...', child: Text('size-24'))
Style('size-32 ...', child: Text('size-32'))
Style('size-40 ...', child: Text('size-40'))

Using a custom value

Use bracket syntax for arbitrary values. Lengths like w-[5px], w-[12rem], and size-[48px] strip their unit suffix (px, rem, em — Flutter uses logical pixels):

Style('w-[5px]', child: /* ... */)

A percentage such as w-[50%] is taken relative to the parent and renders through Flutter’s FractionallySizedBox — the same path as the w-1/2 fractions, but accepting any value (including decimals no fraction provides, e.g. w-[37.5%]). Percentages work the same on h, min-w/min-h, max-w/max-h, and size.

Style('w-[37.5%] ...', child: Text('w-[37.5%]'))

Class reference

Class	Value
w-<number>	spacing scale × <number> (e.g. w-4 = 16px)
w-<fraction>	<fraction> × parent width (e.g. w-1/2 = 50%)
w-3xs	256px
w-2xs	288px
w-xs	320px
w-sm	384px
w-md	448px
w-lg	512px
w-xl	576px
w-2xl	672px
w-3xl	768px
w-4xl	896px
w-5xl	1024px
w-6xl	1152px
w-7xl	1280px
w-auto	no constraint
w-px	1px
w-full	100% (infinity)
w-screen	viewport width (MediaQuery.sizeOf(context).width)
w-dvw / w-lvw / w-svw	viewport width (collapsed; Flutter has no dynamic-viewport distinction)
w-dvh / w-lvh / w-svh	viewport height (used as width)
w-[<value>]	arbitrary value — length (units stripped) or percentage (e.g. w-[50%] → factor of parent)

size-<n> mirrors the full surface and applies the same value to both width and height.

w-(<custom-property>) / size-(<custom-property>) are resolved against theme-defined StyleThemeData.customProperties — e.g. w-(--my-width) behaves like w-[200px] when the theme defines --my-width: '200px'. Cascade-inherited or JS-set CSS variables remain out of scope.

Parity omissions

• w-min / w-max / w-fit — content-based sizing. Maps to Flutter’s IntrinsicWidth/IntrinsicHeight. Tracked for a future PR — playground pages must avoid IntrinsicWidth for performance, but the library can expose them when a docs page exercises them.