You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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+!
I quote the documentation:
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 havexs: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 sized640px+
, so a 100vw image becomes 50vw. However, NuxtImg will still load the 100vw image on640px
screens and will only load the 50vw image on641px+
!The solution is to update screens to:
The text was updated successfully, but these errors were encountered: