In terms of CSS frameworks, Tailwind CSS is one of my favorites. Tailwind CSS is incredibly user friendly, highly customizable, and it does not use default styling. That means you don't have to potentially spend hours worrying about overriding styles. There are endless ways to incorporate Tailwind CSS into your project and in this article I'll walk you through one of them. Let's get started!
- Follow the steps provided at https://tailwindcss.com/docs/installation to install and configure Tailwind CSS.
Add a style class outside of your functional component as shown below.
const style = {
wrapper: `bg-[#303339] flex-auto w-[14rem] h-[22rem] my-10 mx-5 rounded-2xl overflow-hidden cursor-pointer`,
imgContainer: `h-2/3 w-full overflow-hidden flex justify-center items-center`,
nftImg: `w-full object-cover`,
details: `p-3`,
info: `flex justify-between text-[#e4e8eb] drop-shadow-xl`,
infoLeft: `flex-0.6 flex-wrap`,
Collection: `font-Semibold text-some text-[#8a939b]`,
assetName: `font-bold text-lg mt-2`,
infoRight: `flex-0.4 text-right`,
priceTag: `font-semibold text-sm text-[#8a939b]`,
priceValue: `flex items-center text-xl font-bold mt-2`,
ethLogo: `h-5 mr-2`,
likes: `text-[#8a939b] font-bold flex items-center w-full justify-end mt-3`,
likeIcon: `text-xl mr-2`,
};
In the style class add properties that describe the elements you intend to style.
For each property add inline-styling.
You may now style each element using the style class. As you can see in the example below, this styling method is very clean and easy to read.
return (
<div
className={style.wrapper}
onClick={() => {
navigate({
pathname: `/nfts/${nftItem.metadata.id}`,
search: `?isListed=${isListed}`,
});
}}
>
<div className={style.imgContainer}>
<img
src={nftItem.metadata.image}
alt={nftItem.metadata.name}
className={style.nftImg}
/>
</div>
<div className={style.details}>
<div className={style.info}>
<div className={style.infoLeft}>
<div className={style.collectionName}>{title}</div>
<div className={style.assetName}>{nftItem.metadata.name}</div>
</div>
{isListed && (
<div className={style.infoRight}>
<div className={style.priceTag}></div>
<div className={style.priceValue}>
<FaEthereum className={style.ethLogo} />
{price}
</div>
</div>
)}
</div>
<div className={style.likes}>
<span className={style.likeIcon}>
<BiHeart />
</span>
{nftItem.likes}
</div>
</div>
</div>
);
Conclusion
The way we write code is constantly evolving. We strive for simplicity while ironically constructing projects that become more complex. If you have never tried to use this styling method, I hope you find this article helpful in designing your next project. Until next time!