为什么在 React 组件中使用时不应用 Tailwind 样式？

Question

我使用 React 和 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  */} ...

布局完全符合预期：

在将硬编码元素切换为名为“TeamTile”的单个数据驱动组件后，不再应用布局。虽然数据已正确传递到组件中并且每条信息都存在，但现在所有肖像在每台设备上都显示在彼此下方：这是为什么？

{/*  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>

元素构造如下，复制硬编码设置 像以前一样使用<article className="flex-col flex h-full" data-aos="fade-up"> 来应用布局：

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;

我的错误在哪里？

Answer 1

因为你用 div 包裹了你的文章标签，所以你必须删除 div 标签。

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>
        );
      })}
    </>
  );
}