Use Stitches native responsive variants

[hmbrg]

Right now, NextUI doesn't use Stitches built-in responsive variants feature.
This makes using responsive props for components a bit awkward to use and not support SSR.

Stitches built-in responsive variants work using CSS media queries and don't use any JS under the hood. Using them looks like this:

() => (
  <Button
    color={{
      '@initial': 'gray',
      '@bp2': 'violet'
    }}
  >
    Button
  </Button>
);

Thanks for the amazing library! This is the missing layer above Stitches that I've dreamed about for a long time. I will definitely use it for my next project.

[jrgarciadev]

Hey @hmbrg I'm glad you liked it!, actually NextUI does have built-in Stitches media queries, I just cleared that answer -> #164 (comment), it was just a misunderstanding

Hope this helps 👍🏻

[hmbrg]

Hey @jrgarciadev, thanks for your answer! I figured out that I can use Stitches media queries inside the css prop but what is not working for me, since the component types won't allow it, is using Stitches responsive variants feature. As showed in my example, that would allow for any variant props (like color — not just css) to be applied based on media queries. Hope this clears it up! :)