Installation

# Using npmnpm install @twind/react# Using Yarnyarn add @twind/react

Usage

import{styled}from"@twind/react"constBox=styled()constButton=styled("button",{base:`    appearance-none border-none bg-transparent    rounded-full px-2.5  `,variants:{size:{sm:`text-sm h-6`,md:`text-base h-9`,},variant:{gray:`        bg-gray-500        hover:bg-gray-600      `,primary:`        text-white bg-purple-500        hover:bg-purple-600      `,},outlined:{true:`bg-transparent ring-1`,},},defaults:{variant:"gray",size:"sm",},matches:[{variant:"gray",outlined:true,use:`ring-gray-500`,},{variant:"primary",outlined:true,use:`text-purple-500 ring-gray-500 hover:text-white`,},],})<Boxtw="m-2.5 flex flex-wrap"css={{gap:"20px"}}><Button>Button</Button><Buttonvariant="gray">GrayButton</Button><Buttonvariant="primary">Primary Button</Button><Buttonvariant="gray"outlined>OutlinedGrayButton</Button><Buttonvariant="primary"outlined>    Outlined Primary Button</Button><Buttonvariant="primary"outlinedsize={{initial:"sm",lg:"md"}}>ResponsivePrimaryButton</Button></Box>

License