Why is Tailwind styling not applied when used inside a React component? - html

Question

I build a layout for a series of team portraits using React and Tailwind:
{/* Portrait list */}
<div className="max-w-sm mx-auto md:max-w-none">
{/* Portrait container */}
<div className="grid gap-12 md:grid-cols-3 md:gap-x-6 md:gap-y-8 items-start">
{/* 1st Portrait */}
<article className="flex flex-col h-full" data-aos="fade-up">
<header>
<Link to="/blog-post" className="block mb-6">
<figure className="relative h-0 pb-9/16 rounded-sm">
<img className="absolute inset-0 w-full h-full object-cover transform hover:scale-105 transition duration-700 ease-out" src={require('../images/john_doe.png').default} width="416" height="582" alt="News 01" />
</figure>
</Link>
<h3 className="h4 mb-2">
<Link to="/blog-post" className="hover:text-gray-100 transition duration-150 ease-in-out">John Doe</Link>
</h3>
</header>
<p className="text-lg text-gray-400 flex-grow">Head of Operations </p>
</article>
*/}
{/* 2nd portrait */} ...
The layout turns out exactly as intended:
After switching the hardcoded elements into a single data-driven component called 'TeamTile' , the layout is no longer applied. While the data is passed correctly into the component and every piece of information is present, all portraits are now shown below each other on every device: Why is this?
{/* Portrait list */}
<div className="max-w-sm mx-auto md:max-w-none">
{/* Portrait container */}
<div className="grid gap-12 md:grid-cols-3 md:gap-x-6 md:gap-y-8 items-start">
<TeamTile />
</div>
</div>
The element is constructed as follows, replicating the hard coded setup
using <article className="flex-col flex h-full" data-aos="fade-up"> exactly as before to apply the layout:
function TeamTile() {
return (
<div>
{TeamData.map((item, index) => {
return (
<article className="flex-col flex h-full" data-aos="fade-up">
<header>
<Link to={item.link} className="block mb-6">
<figure className=" rounded-sm">
<ProgressiveImage
delay={1000}
src={item.portrait}
placeholder={item.placeholder}
>
{(src, loading) => (
<img
className="inset-0 object-cover transform hover:scale-105 transition duration-700 ease-out"
style={{ opacity: loading ? 0.5 : 1 }}
src={item.portrait}
alt={item.alt}
/>
)}
</ProgressiveImage>
</figure>
</Link>
</header>
<div>
<h3 className="h4 mb-2">{item.name}</h3>
<p className="text-lg text-gray-500 flex-grow">{item.title}</p>
</div>
</article>
);
})}
</div>
);
}
export default TeamTile;
Where is my mistake?

Answer 1

because you wrapped your article tag with div you must remove div tag.
function TeamTile() {
return (
<>
{TeamData.map((item, index) => {
return (
<article className="flex-col flex h-full" data-aos="fade-up">
<header>
<Link to={item.link} className="block mb-6">
<figure className=" rounded-sm">
<ProgressiveImage
delay={1000}
src={item.portrait}
placeholder={item.placeholder}
>
{(src, loading) => (
<img
className="inset-0 object-cover transform hover:scale-105 transition duration-700 ease-out"
style={{ opacity: loading ? 0.5 : 1 }}
src={item.portrait}
alt={item.alt}
/>
)}
</ProgressiveImage>
</figure>
</Link>
</header>
<div>
<h3 className="h4 mb-2">{item.name}</h3>
<p className="text-lg text-gray-500 flex-grow">{item.title}</p>
</div>
</article>
);
})}
</>
);
}