I have tried without success to implement the prefix last: as shown in the Tailwind CSS documentation. Can anyone point out what I am doing wrong? I cannot make this work.

{items.map((item, i) => {
  return (
    <li
      key={i.toString()}
      v-for="(item, i) in items"
      className="pb-sm xl:pb-md last:pb-0" // This is the problematic fellow!
    >
      <div className="grid grid-cols-12">
        <div className="col-start-2 col-span-10 md:col-start-2 md:col-span-8  pb-2 sm:pb-xs md:pb-xs lg:pb-xs xl:pb-0">
          <div className="serif text-h5 xl:text-h4 lg:text-h4 md:text-h4 leading-snug xl:leading-tight lg:leading-tight md:leading-snug">
            {item}
          </div>
        </div>
        <div className="col-start-2 col-span-10 sm:col-start-5 sm:col-span-6 md:col-start-5 md:col-span-6 lg:col-start-5 lg:col-span-6 xl:col-start-5 xl:col-span-3 pb-xs sm:pb-xs">
          <div className="text-p sm:text-p">{description[i]}</div>
        </div>
      </div>
    </li>
  )
})}

I have tried without success to implement the prefix last: as shown in the Tailwind CSS documentation. Can anyone point out what I am doing wrong? I cannot make this work.

{items.map((item, i) => {
  return (
    <li
      key={i.toString()}
      v-for="(item, i) in items"
      className="pb-sm xl:pb-md last:pb-0" // This is the problematic fellow!
    >
      <div className="grid grid-cols-12">
        <div className="col-start-2 col-span-10 md:col-start-2 md:col-span-8  pb-2 sm:pb-xs md:pb-xs lg:pb-xs xl:pb-0">
          <div className="serif text-h5 xl:text-h4 lg:text-h4 md:text-h4 leading-snug xl:leading-tight lg:leading-tight md:leading-snug">
            {item}
          </div>
        </div>
        <div className="col-start-2 col-span-10 sm:col-start-5 sm:col-span-6 md:col-start-5 md:col-span-6 lg:col-start-5 lg:col-span-6 xl:col-start-5 xl:col-span-3 pb-xs sm:pb-xs">
          <div className="text-p sm:text-p">{description[i]}</div>
        </div>
      </div>
    </li>
  )
})}

• javascript
• reactjs
• css-selectors
• tailwind-css

4 Answers 4

As of April 2022 (v 3.0.24)

According to Tailwind's doc:

Style an element when it is the first-child or last-child using the first and last modifiers

Just use last:${yourClassName} to target the last child in your case.

Source: https://tailwindcss.com/docs/hover-focus-and-other-states#last

Not sure if you're using Tailwind v2.X or v1.X but you need to activate the variant for last. Here is a quote from the official v2 docs related page

By default, the last-child variant is not enabled for any core plugins.

I've tried to make an example for you on https://play.tailwindcss.com/ but it doesn't work there. Meanwhile, I spin a Vite VueJS repo with the latest version of TW and it's working perfectly.

So, this in your tailwind.config.js should do the trick

module.exports = {
  ...
  variants: {
    extend: {
      padding: ['last'],
    }
  },
  ...
}

v2's documentation is here and v1's is here.
Beware, the variants >> extend is only available in the v2. If you're using v1, you can still override the whole padding variant manually, not a big deal.

PS: Tailwind's team fixed the issue already, damn !

I was working on my project. I solved this issue using CSS, but I had to import a CSS file into the project file. So, I started solving it using tailwind classes, and I found that its better to use indexes in the map.

{json.map((item: any, index: number) => (

  <div key={index} className={`flex flex-col ${index === json.length - 1 ? `bg-red-main` : `bg-white`} justify-center items-center w-full `}>
  # some code
  </div>

)}

In both TailwindCSS v3 and v4, you have multiple options for this. First, you can define different styling for the first: and last: elements. Secondly, by using the :not variant, you can target the opposite: not-first: and not-last:.

• :first variant - TailwindCSS v4 Docs
• :last variant - TailwindCSS v4 Docs
• :not variant - TailwindCSS v4 Docs

These variants always override the originally specified settings, so I'll illustrate my example with two text colors. Blue represents the base color, while the red color is the overriding special case (if it's first/last/not-first/not-last).

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<hr> * :last variant -> blue (last:text-red-400)
<div>
  <div class="text-blue-400 last:text-red-400">First</div>
  <div class="text-blue-400 last:text-red-400">...</div>
  <div class="text-blue-400 last:text-red-400">Last (*)</div>
</div>

<hr> * :not-last variant -> red (not-last:text-red-400)
<div>
  <div class="not-last:text-red-400 text-blue-400">First (*)</div>
  <div class="not-last:text-red-400 text-blue-400">... (*)</div>
  <div class="not-last:text-red-400 text-blue-400">Last</div>
</div>

<hr> * :first variant -> red (first:text-red-400)
<div>
  <div class="first:text-red-400 text-blue-400">First (*)</div>
  <div class="first:text-red-400 text-blue-400">...</div>
  <div class="first:text-red-400 text-blue-400">Last</div>
</div>

<hr> * :not-first variant -> blue (not-first:text-red-400)
<div>
  <div class="text-blue-400 not-first:text-red-400">First</div>
  <div class="text-blue-400 not-first:text-red-400">... (*)</div>
  <div class="text-blue-400 not-first:text-red-400">Last (*)</div>
</div>