Panda CSS Has a Free API That Combines the Best of Tailwind and CSS-in-JS

Panda CSS is a zero-runtime CSS-in-JS engine that generates atomic CSS at build time. Think Tailwind's performance with styled-components' DX. Style Props: Type-Safe Styling import { css } from " ../styled-system/css " ; function Card ({ title , price }) { return ( < div className = { css ({ bg : " white " , p : " 6 " , rounded : " xl " , shadow : " lg " , _hover : { shadow : " 2xl " , transform : " translateY(-2px) " }, transition : " all 0.2s " , }) } > < h2 className = { css ({ fontSize : " xl " , fontWeight : " bold " , color : " gray.900 " }) } > { title } </ h2 > < span className = { css ({ fontSize : " 2xl " , color : " green.600 " , fontWeight : " semibold " }) } > $ { price } </ span > </ div > ); } Recipes: Component Variants import { cva } from " ../styled-system/css " ; const button = cva ({ base : { display : " inline-flex " , alignItems : " center " , fontWeight : " semibold " , rounded : " lg " , cursor : " pointer " , transition : " all 0.2s " , }, variants : { visual :