CSS Tailwind v3 CSs 그리드의 첫 번째 행을 타겟팅하는 방법

내 -앱에서 나는이 루프를하고 있어요vuejs

<div class="grid grid-cols-3 gap-14">
   <article-card v-for="(article, index) in articles" :key="index" :content="article" />
</div>

지금까지 는 좋지만, 다른 -> 의 첫 번째 행을 표시하고 싶습니다 .css-gridgrid-template-columns: 1fr 2fr 1.5fr;

어떻게 할 수 있습니까? 누군가가 나를 도울 수 있습니까? 내가 사용하고 있어요, 그래서 어쩌면 그 도움이 될 수 있습니까?tailwindcss

 

 

"첫 번째" 수정자를 사용하여 첫 번째 자식일 때 요소 스타일을 연출합니다.

첫 번째 인덱스에 대한 코드 사용 조건에서 (나는 그것을 가정 1) 스타일을 사용, 난 당신이 단지 스타일 사용을 언급 조건 구현을 알고 있다고 생각 -

 <article-card  first:your-style />

자세한 내용은 공식 역풍 CSS 문서를 참조하십시오. 첫째, 마지막, 이상한, 심지어

또한 테일 윈드 CSS에서 얻을 코드 예, 그 도움이 될 수 있습니다.

<ul role="list" class="p-6 divide-y divide-slate-200">
   {#each people as person}
      <!-- Remove top/bottom padding when first/last child -->
      <li class="flex py-4 first:pt-0 last:pb-0">
         <img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
         <div class="ml-3 overflow-hidden">
            <p class="text-sm font-medium text-slate-900">{person.name}</p>
            <p class="text-sm text-slate-500 truncate">{person.email}</p>
         </div>
      </li>
   {/each}
</ul>

Tailwind v3