Table of contents
Recently made the decision to convert my project from Bootstrap to Tailwind. You maybe wondering what may have led to that decision. Part of the reason is I like the flexibility of Tailwind and seems worth the hype. Another reason was because I wanted to learn something new. Check it out the live version of PawternityHub
Styling ๐จ
Originally, the project was developed during a hackathon called Owl Hacks. At the time, I knew how to use Bootstrap and wanted to use it for quick development so I would not have to worry about css. I also used a premade theme from Bootswatch to make it look presentable for the hackathon. As the project grew, I realized I was sometimes fighting against Bootstrap css such as the PetCards. Some of the cards css styles I had to overwrite to get it to the style I want.
DaisyUI ๐ผ
With tailwind being implemented, I realized I needed a theme to start off with. It may seem like I am going in a full circle with finding a premade theme from before but I made the decision to go with daisyui. DaisyUI had premade themes but also the option to customize with their theme generator
I also used a react-daisyui
since it acts like a wrapper with daisyui. You are still able to customize with tailwind just by adding it to the className. Fun fact I contributed a couple times to the repo. This was me using their <Card/>
component.
<div className="lg:px-4 px-1 w-full md:w-1/2 lg:w-1/3 my-4 fadeInUp ">
<Card className="bg-base-100 shadow-xl" bordered>
<div className="p-6 flex flex-row justify-between">
{CardText(name)}
<Link to={`/animal/${id}`}>
<Button color="primary" size="sm">
More Info
</Button>
</Link>
</div>
<Card.Image
alt={link ? type : `${type} placeholder`}
src={link?.medium || Placeholder}
onMouseEnter={onHoverPhoto}
onMouseLeave={onBlurPhoto}
className="object-cover h-80 w-full"
/>
<Card.Body className="flex flex-row justify-center">
<PetIcon type={type} /> {CardText(breeds.primary)}
</Card.Body>
</Card>
{children}
</div>
Conclusion โ
The transition to tailwind went smoothly despite having to convert a lot files and refactoring them. Felt happy that I was able to refactor the code and css that was bothering me from long ago.