CSS Tailwind How to target first row of css grid-CodePudding

In my vue-app I'm doing this loop

<div >
   <article-card v-for="(article, index) in articles" :key="index" :content="article" />
</div>

So far so good, but I want to display the first row of the css-grid differently -> e.g. something like grid-template-columns: 1fr 2fr 1.5fr; - just to make them more visible

How can I do that? Can someone help me out? I'm using tailwindcss, so maybe that could help?

CodePudding user response：

Style an element when it is the first-child using the "first" modifiers:

In your code use condition for the first index (I assume it 1) and use the style, I think you know the condition implementation I just mention the style usage-

 <article-card  first:your-style />

For more see the official tailwind CSS documentation. First, last, odd, and even

Also a code example I get from Tailwind CSS, that might help you.

<ul role="list" >
   {#each people as person}
      <!-- Remove top/bottom padding when first/last child -->
      <li >
         <img  src="{person.imageUrl}" alt="" />
         <div >
            <p >{person.name}</p>
            <p >{person.email}</p>
         </div>
      </li>
   {/each}
</ul>

CodePudding user response：

If you are using Tailwind v3 then you can just use arbitrary values feature, for example like that:

<div >
  <!-- ... -->
</div>

So just wrap values in square brackets [...] and use _ instead of spaces.

More info in the docs as always