For Some Odd Reason max-w-lg (Only!) Reverts to Tailwind Default

[jwalkerinterpres]

What version of Tailwind CSS are you using?

3.4.3

What build tool (or framework if it abstracts the build tool) are you using?

postcss: 8.4.38
vite: 5.0.3

What version of Node.js are you using?

v21.2.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://play.tailwindcss.com/j1hGAbY7f1

Just inspect the div it generates and you will see:

Also, a quick side note: if you're going to require that people provide repro, why not link to the reproduction tool you want them to use? https://play.tailwindcss.com/ seems like it's expressly designed for this purpose, so why not add a link to it in this template (in the text that says that a repro is required)?

Describe your issue

I have Tailwind on a production site, and it's awesome. Everything works perfectly, as expected ... or at least it did until I saw this today:

What you want to focus on is that the element in question has two classes: min-w-lg max-w-lg. And I've defined my own custom lg of 20px in tailwind.config.js:

  spacing: {
     // ....
    lg: '20px',
    // ....
  }

min-w-lg works exactly as expected, rendering a style of min-width: 20px;. But max-w-lg ... despite using literally the same lg ... is instead rendering the default Tailwind style of max-width: 32rem;.

I'm far from a Tailwind expert, but if foo-lg gives me 20px, bar-lg should also give me 20px, regardless of what foo and bar are (well, as long as they are spacing properties). As I understand it it, it should be impossible for min-w-lg to result in a different number of pixels vs. max-w-lg ... but it does.

[adamwathan]

Hey! What you're seeing here is that the max-w-* utilities read from two different theme keys — maxWidth and spacing, and the default lg value is defined under the maxWidth key which takes precedence over the values in the spacing key.

Here's the source code:

https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js#L653-L673

Because theme('spacing') is spread in before defining the default lg value, the default lg value ends up overriding the one defined in spacing.

So what you actually want to do is configure the lg value under the maxWidth key:

https://play.tailwindcss.com/6CREypC2BK?file=config

Note that by default there is no min-w-lg utility in Tailwind CSS v3.x, all of those t-shirt size values only exist for the max-w-* utilities. So if you want min-w-lg to exist you'll want to configure that as well.

If your actual goal is for all size related utilities to depend solely on the spacing key and disregard the default maxWidth configuration, you could do this:

https://play.tailwindcss.com/TCp5l4P0ws?file=config

This completely overrides the maxWidth defaults (by defining the values at the root of theme instead of under extend) with just the spacing values, to make sure there are never any collisions.

[jwalkerinterpres]

That's incredibly confusing. I'm sure you have a reason for it all, but ... why?

But regardless, shouldn't the above be documented? https://tailwindcss.com/docs/max-width makes no mention of max-width styles trumping the spacing ones; to the contrary, editing spacing is the first thing they recommend (emphasis added):

You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.

They do mention that you can set max-width separately, but essentially the sentence I quoted is a lie: if you add it to spacing it won't change your max-width (as this ticket demonstrates).

Why not just tell people to use max-width there and not mention spacing (the simple solution), or explain why you need to use both (if you do)?

[adamwathan]

Yep the docs aren't perfect, it's a lot to document and a lot of little things that have built up over 7 years of evolving and maintaining the project. You're right the behavior is a little complex and is the result of slow evolution trying to satisfy new needs while preserving backwards compatibility

Accusing me of lying is a bit harsh — customizing your spacing scale does impact the max-w-* utilities, except in the case where you're adding a value that collides with something defined in the maxWidth scale. This is the case for anything using a shared scale in Tailwind, like colors, where specifying a color under backgroundColor will override the same color name under colors because it's a more specific key.

Anyways I have a limited amount of time to help people who aren't appreciative of the help. Good luck with your project.

[jwalkerinterpres]

Accusing me of lying is a bit harsh

I most certainly did not!

I apologize if you misunderstood what I wrote, but it only said the docs are lying. What I wrote was:

the sentence I quoted is a lie

... after quoting the docs. And that was in no way controversial: we both agree the docs are "lying" (ie. are incorrect) on that point.

I very much appreciate everyone on the Tailwind team (including, but not limited to, you), and I would never accuse you of lying or anything else, especially when it was clear you were only helping!