Massive issue with sizes affecting Tailwind and other frameworks.

[MarioAda]

"@nuxt/image": "^1.4.0"
"nuxt": "^3.7.3"

I quote the documentation:

This default size is used up until the next specified screen width, and so on. Each specified size pair applies up - so md:400px means that the image will be sized 400px on md screens and up.

However, the max-width value is wrong and incompatible with Tailwind and most toolkits and frameworks.

Here's an example:

It says (max-width: 640px) 100vw because I have xs:100vw in the sizes attribute. Note that 640px screens are included, which is the problem!

In Tailwind, if we have grid-cols-1 sm:grid-cols-2, we'll split the row in 2 on screens sized 640px+, so a 100vw image becomes 50vw. However, NuxtImg will still load the 100vw image on 640px screens and will only load the 50vw image on 641px+!

The solution is to update screens to:

screens: {
    xs: 319,
    sm: 639,
    md: 767,
    lg: 1023,
    xl: 1279,
    "2xl": 1535,
}