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

Question

我尝试过最后实现前缀，但没有成功：如 Tailwind.css 文档中所示。谁能指出我做错了什么？我无法完成这项工作。

提前致谢。

React 组件

{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

不确定您使用的是 Tailwind v2.X 还是 v1.X，但您需要激活 last 的变体。这是官方 v2 文档中的引述 related page

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

我已经尝试在 https://play.tailwindcss.com/ 上为您制作一个示例，但它在那里不起作用。同时，我使用最新版本的 TW 旋转了一个 Vite VueJS 存储库，它运行良好。

所以，您 tailwind.config.js 中的这个应该可以解决问题

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

v2 的文档是 here and v1's is here.
请注意，variants >> extend 仅在 v2 中可用。如果您使用的是 v1，您仍然可以手动覆盖整个 padding 变体，这没什么大不了的。

PS：Tailwind 的团队已经解决了这个问题，该死！

Answer 2

截至 2022 年 4 月（v 3.0.24）

根据 Tailwind 的文档：

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

只需使用 last:${yourClassName} 定位最后一个 child。

来源： https://tailwindcss.com/docs/hover-focus-and-other-states#first-last-odd-and-even

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

Tailwind.css — How to implement the last-child using Tailwind?

javascript

css-selectors

reactjs

tailwind-css