max-w-* documentation vs. output (--container vs --spacing)

[seanhakbb]

I'm using latest tailwind & tailwind CLI (4.0.6).

this is my max-w output:

  .max-w-2xl {
    max-width: var(--spacing-2xl);
  }
  .max-w-2xs {
    max-width: var(--container-2xs);
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-8xl {
    max-width: var(--spacing-8xl);
  }

Sometimes its using container, sometimes its using spacing variable.
I haven't customized tailwind config, but i have imported flowbite

The official documentation says they should all use container.

max-w-3xs | max-width: var(--container-3xs); /* 16rem (256px) */
max-w-2xs | max-width: var(--container-2xs); /* 18rem (288px) */
max-w-xs | max-width: var(--container-xs); /* 20rem (320px) */
max-w-sm | max-width: var(--container-sm); /* 24rem (384px) */
max-w-md | max-width: var(--container-md); /* 28rem (448px) */
max-w-lg | max-width: var(--container-lg); /* 32rem (512px) */
max-w-xl | max-width: var(--container-xl); /* 36rem (576px) */
max-w-2xl | max-width: var(--container-2xl); /* 42rem (672px) */
max-w-3xl | max-width: var(--container-3xl); /* 48rem (768px) */
max-w-4xl | max-width: var(--container-4xl); /* 56rem (896px) */
max-w-5xl | max-width: var(--container-5xl); /* 64rem (1024px) */
max-w-6xl | max-width: var(--container-6xl); /* 72rem (1152px) */
max-w-7xl | max-width: var(--container-7xl); /* 80rem (1280px) */

Is this a bug(tailwind or flowbite), misconfiguration/usererror or is the documentation wrong?

[philipp-spiess]

Hey there! Do you mind attaching a repro for this? By default we do not set any --spacing-* value so this must come from either your config or from Flowbite. If I generate all the max-w-* utilities in the playground for example, it generates what you expect: https://play.tailwindcss.com/eAL7WYsQ8Q?file=css

[seanhakbb]

Can confirm, when removing @import "flowbite"; it works as expected.
I will need to check documentation on flowbite instead :)
Thank you for quick reply!

[ananiy]

@philipp-spiess
can you help me check this?
https://play.tailwindcss.com/dUhBCt2rx8?file=css

I want to using
--spacing-sm in px-sm for 0.5rem
and
--container-sm in max-w-sm for 24rem

[philipp-spiess]

@ananiy You can use the finder-grained controls for each utility. e.g. --padding-* for padding values and/or --max-width-* for the max-w utilities: https://play.tailwindcss.com/lbynUC5VYx?file=css

[ananiy]

@ananiy You can use the finder-grained controls for each utility. e.g. --padding-* for padding values and/or --max-width-* for the max-w utilities: https://play.tailwindcss.com/lbynUC5VYx?file=css

it works! thanks a lot! :)