Confusion with screens definition

Hello!

Am I the only one who gets a lot confused trying to understand how the sizes prop work?

At first glance, I assumed that the default breakpoints were matching the ones proposed by tailwindcss and therefore mobile first (usage of min-width).

But by looking at the generated srcset/sizes, it seems like max-width is being used.

For such props:

sizes: 'sm:100vw md:50vw'
width: 1920
height: 1080

I understand that:

• between sm and md: 100vw
• md and larger: 50vw
• before sm: ???

What I actually get it is:

<img
  src="img.jpg?width=384&height=216"
  srcset="img.jpg?width=640&height=360 640w, img.jpg?width=384&height=216 384w"
  sizes="(max-width: 640px) 100vw, 50vw"
  width="1920" height="1080"  
/>

Which can be translated to:

• until sm: 100vw
• sm and larger: 50vw

➡ So not what's expected

Defining screens that match with tailwind's breakpoints would be:

screens: {
  xs: 639,
  sm: 767,
  md: 1023,
  lg: 1279,
  xl: 1535,
  2xl: Infinity // mhh... 🤔
},

The result is:

<img 
  src="img.jpg?width=512&height=288"
  srcset="img.jpg?width=767&height=431 767w, img.jpg?width=512&height=288 512w"
  sizes="(max-width: 767px) 100vw, 50vw"
  width="1920" height="1080"
/>

Which can be translated to:

• until md: 100vw
• md and larger: 50vw

➡ Seems more appropriate but still not mobile-first approach.

Maybe the documentation should explain a bit more how the responsive is handled under the hood? At least explain that xl means "until device width of 1280px"?

Start with the linked API options screens documentation and the sizes prop examples in this issue. Clarify how screen values map to max-width conditions, how sizes are interpreted before and after breakpoints, and whether the behavior is mobile-first; done means the documentation explains the generated srcset and sizes output with an accurate example.