<input tw="border hover:border-black" />

const hasHover = true;
render(<input css={[tw`border`, hasHover && tw`hover:border-black`]} />)

const hasHover = true;
const hoverStyles = css`
  &:hover {
    border-color: black;
    ${tw`text-black`}
  }
`
const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && hoverStyles]} />
)
render(
  <React.Fragment>
    <Input hasHover={true} placeholder={"hover true"} />
    <Input hasHover={false} placeholder={"hover false"} />
  </React.Fragment>
)

const Input = tw.input`border hover:border-black`
render(<Input />)

const Input = tw.input`border hover:border-black`
const PurpleInput = tw(Input)`border-purple-500`
render(<PurpleInput />)

const StyledInput = styled.input(({ hasBorder }) => [
  `color: black;`,
  hasBorder && tw`border border-purple-500`,
])
const Input = (props) => <StyledInput {...props} />
render(
  <React.Fragment>
    <Input hasBorder={true} placeholder={"border true"} />
    <Input hasBorder={false} placeholder={"border false"} />
  </React.Fragment>
)

const StyledInput = styled.input`
  color: black;
  ${({ hasBorder }) => hasBorder && tw`border border-purple-500`}
`
const Input = (props) => <StyledInput {...props} />
render(
  <React.Fragment>
    <Input hasBorder={true} placeholder={"border true"} />
    <Input hasBorder={false} placeholder={"border false"} />
  </React.Fragment>
)