BOX ALIGNMENT - Justify Items : justify-items-auto not supported by google chrome

[devhoussam]

What version of Tailwind CSS are you using?

v2.0.4

What version of Node.js are you using?

v12.0.0

What browser are you using?

Chrome

What operating system are you using?

Windows 10

Reproduction repository

https://i.imgur.com/Pl7I3Gv.png

[fedeci]

Hi @devhoussam, what version of chrome are you using? Can you share a reproduction repo or the affected code, please?

[devhoussam]

Hi @devhoussam, what version of chrome are you using? Can you share a reproduction repo or the affected code, please?

Google Chrome Version : 89.0.4389.90
Windows 10

as you can see in this example the place-items-auto Utility class not supported on chrome.

.place-items-auto {
    place-items: auto;
}

https://tailwindcss.com/docs/place-items

[fedeci]

I think that since auto does not apply any specific behavior it is considered as invalid property (is like specifying nothing). Not sure though.

[devhoussam]

I think that since auto does not apply any specific behavior it is considered as invalid property (is like specifying nothing). Not sure though.

maybe maybe not so what is the solution because it is an Utility class supported by Tailwind CSS so I will keep searching to find how can I fix it.

[adamwathan]

Yep looks like MDN lies about this, as far as I can tell in my own testing there is no actual auto value unless it's just in the spec and no browsers support it.

I would just not use it, we'll likely just remove it from Tailwind since it does nothing.

[fedeci]

Isn't it useful with breakpoints?
eg.
sm:align-items-left md:align-items-auto

[adamwathan]

Well it doesn't exist so it can't really be useful 😅 align-items: auto isn't understood by the browser:

Instead you just want to explicitly set it to the value you want, like align-items: start which is the default 👍

[fedeci]

The value used is the value of the justify-items property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, auto represents normal.

From mozilla docs 🤔

[adamwathan]

Yeah but those docs are wrong which is what we have learned in this issue 😅 I added it originally because it was included in MDN, but it doesn't actually work in any browser as evident in the screenshot, hah.

[devhoussam]

Yeah but those docs are wrong which is what we have learned in this issue 😅 I added it originally because it was included in MDN, but it doesn't actually work in any browser as evident in the screenshot, hah.

This is what it looks like to me too, so I think it would be better if it were removed from the doc

[fedeci]

Yeah but those docs are wrong which is what we have learned in this issue 😅 I added it originally because it was included in MDN, but it doesn't actually work in any browser as evident in the screenshot, hah.

Well yes😁, but if the default behavior is the one specified there (where normaly it is start but if the box is absolutely positioned it is normal) then we can't just expect the users to adopt start as the default value because the default value is relative to the context. I don't know if I explained well or if my thoughts have sense😂.

[alpadev]

Yep looks like MDN lies about this, as far as I can tell in my own testing there is no actual auto value unless it's just in the spec and no browsers support it.

I would just not use it, we'll likely just remove it from Tailwind since it does nothing.

auto isn't even mentioned in the specs (anymore). https://www.w3.org/TR/css-align-3/#justify-items-property

According to w3c/csswg-drafts#1318 looks like they renamed it to legacy.

[alpadev]

Well it doesn't exist so it can't really be useful 😅 align-items: auto isn't understood by the browser:

Instead you just want to explicitly set it to the value you want, like align-items: start which is the default 👍

In regards to the spec https://www.w3.org/TR/css-align-3/#align-items-property. Looks like align-items: normal is the initial value. 😊

[devhoussam]

so the tailwind css core team should update the documentation

[adamwathan]

Removed justify-auto and place-items-auto for the next version since they do nothing, and removed from docs. They will disappear from the class table in the docs when we publish the next version 👍🏻