Building Reusable React Components Using Tailwind — Smashing Magazine

PHOTO EMBED

Wed Feb 23 2022 03:41:31 GMT+0000 (UTC)

Saved by @shanleo ##javascript ##react #tailwind

// Button.jsx
import classnames from 'classnames';

function Button ({size, bgColor, textColor, children}) {
    return (
        <button className={classnames("bg-${bgColor} text-${textColor} font-bold py-2 px-4 rounded", {
    "text-xs": size === 'sm'
    "text-xl": size === 'lg',
    })}>
        {children}
    </button>
    )
};

export default Button;
content_copyCOPY

https://www.smashingmagazine.com/2020/05/reusable-react-components-tailwind/