Min-Width

Use min-width utilities to set the minimum width of an element, preventing it from shrinking below that size. Tailwind v4 ships numeric (min-w-<number>), fractional (min-w-<fraction>), container-scale (min-w-3xs…min-w-7xl), and viewport variants on the same resolver as w-* and max-w-*.

Basic example

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

Style('w-20 ...', children: [
  Style('min-w-80 ...', child: Text('min-w-80')),
  Style('min-w-64 ...', child: Text('min-w-64')),
  Style('min-w-48 ...', child: Text('min-w-48')),
  Style('min-w-40 ...', child: Text('min-w-40')),
  Style('min-w-32 ...', child: Text('min-w-32')),
  Style('min-w-24 ...', child: Text('min-w-24')),
])

Using a percentage

Use min-w-full or min-w-<fraction> utilities like min-w-1/2 and min-w-2/5 to give an element a percentage-based minimum width. Fractions are resolved at layout time via a LayoutBuilder — the parent must be horizontally bounded.

class MinWidthPercentageExample extends StatelessWidget {
  const MinWidthPercentageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Style(
      'relative mx-auto my-6 flex w-full justify-items-start gap-3'
      ' text-center font-mono text-xs font-bold text-white',
      children: [
        Stripes('absolute inset-x-0 -inset-y-3 rounded-lg', border: true),
        const Style(
          'relative min-w-2/3 rounded-lg bg-indigo-500 px-4 py-2',
          child: Text('min-w-3/4'),
        ),
        const Style(
          'relative w-full rounded-lg bg-indigo-300 px-4 py-2'
          ' dark:bg-indigo-800 dark:text-indigo-400',
          child: Text('w-full'),
        ),
      ],
    );
  }
}

class MinWidthPercentagePage extends StatelessWidget {
  const MinWidthPercentagePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: 640,
        height: 160,
        child: Center(
          child: SizedBox(
            width: 480,
            child: Style(
              'relative mx-auto my-6 flex w-full justify-items-start gap-3'
              ' text-center font-mono text-xs font-bold text-white',
              children: [
                Stripes(
                  'absolute inset-x-0 -inset-y-3 rounded-lg',
                  border: true,
                ),
                const Style(
                  'relative min-w-2/3 rounded-lg bg-indigo-500 px-4 py-2',
                  child: Text('min-w-3/4'),
                ),
                const Style(
                  'relative w-full rounded-lg bg-indigo-300 px-4 py-2'
                  ' dark:bg-indigo-800 dark:text-indigo-400',
                  child: Text('w-full'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Using the container scale

Use utilities like min-w-sm and min-w-xl to set an element to a fixed minimum width based on the container scale.

Style('w-40 ...', children: [
  Style('min-w-lg ...', child: Text('min-w-lg')),
  Style('min-w-md ...', child: Text('min-w-md')),
  Style('min-w-sm ...', child: Text('min-w-sm')),
  Style('min-w-xs ...', child: Text('min-w-xs')),
  Style('min-w-2xs ...', child: Text('min-w-2xs')),
  Style('min-w-3xs ...', child: Text('min-w-3xs')),
])

Using a custom value

Use bracket syntax for arbitrary values: min-w-[220px], min-w-[10rem]. Unit suffixes (px, rem, em) are stripped — Flutter uses logical pixels.

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

Class reference

Class	Value
min-w-<number>	spacing scale × <number>
min-w-<fraction>	<fraction> × parent width
min-w-3xs	256px
min-w-2xs	288px
min-w-xs	320px
min-w-sm	384px
min-w-md	448px
min-w-lg	512px
min-w-xl	576px
min-w-2xl	672px
min-w-3xl	768px
min-w-4xl	896px
min-w-5xl	1024px
min-w-6xl	1152px
min-w-7xl	1280px
min-w-auto	no constraint (returns null = unset)
min-w-px	1px
min-w-full	100% (infinity)
min-w-screen	viewport width (MediaQuery)
min-w-dvw / min-w-lvw / min-w-svw	viewport width
min-w-dvh / min-w-lvh / min-w-svh	viewport height
min-w-[<value>]	arbitrary value (units stripped)

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

Parity omissions

• min-w-min / min-w-max / min-w-fit — content-based sizing. Tracked for a future PR.