Tailwind.css — 如何使用 Tailwind 实现 last-child？

Question

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.

Thank you in advance.

React Component

{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>
            )
          })}

Answer 1

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

Answer 2

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 !