제로에 가까운 런타임, 서버 측 렌더링, 다중 변형 지원 및 동급 최강의 개발자 경험.

https://stitches.dev/

https://github.com/modulz/stitches

https://stitches.dev/docs/installation

const Button = styled('button', {

  // Edit the code!

  backgroundColor: 'hsl(206,100%,50%)',

  borderRadius: '9999px',

  color: 'white',

  fontSize: '17px',

  fontWeight: 500,

  paddingTop: '10px',

  paddingBottom: '10px',

  paddingLeft: '16px',

  paddingRight: '16px',

  textDecoration: 'none',

  appearance: 'none',

  transition: 'all 200ms ease',

  ':hover': {

    boxShadow: '0 5px 15px rgba(0, 0, 0, .12)',

    transform: 'translateY(-2px)',

  },

  variants: {

    color: {

      white: {

        backgroundColor: 'transparent',

        color: 'hsl(206,10%,44%)',

        ':hover': {

          backgroundColor: 'white',

          color: 'hsl(206,10%,5%)',

        },

      },

    }

  }

});

render(

  <div style={{ display: 'flex', justifyContent: 'center', gap: '35px' }}>

    <Button as="a" href="/docs/installation">Documentation</Button>

    <Button color="white" as="a" href="https://github.com/modulz/stitches">GitHub</Button>

  </div>

);