import tw , { styled , theme } from 'twin.macro' ; const Button = styled . button ( { ... tw `px-8 py-2 rounded transform duration-75 outline-none focus:outline-none` , ... tw `hocus:(scale-105 text-yellow-300)` , color : theme `colors.white` , variants : { variant : { primary : tw `
        bg-black text-white border-black
        focus:(ring-2 ring-yellow-400)
      ` , secondary : tw `
        border-2 border-yellow-500
        focus:(ring-2 ring-purple-400)

        // Use short css to combine tailwind classes with regular css
        box-shadow[0 0.1em 0 0 rgba(0, 0, 0, 0.25)]
      ` , } , isSmall : { true : tw `text-sm` , false : tw `text-lg` } , } , } ) ; export default Button ;