image
image copied to clipboard
Massive issue with `sizes` affecting Tailwind and other frameworks.
"@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,
}