TailwindCSS 如何添加第一个和最后一个伪类答案

【问题标题】：TailwindCSS how to add first and last pseudo classesTailwindCSS 如何添加第一个和最后一个伪类
【发布时间】：2021-10-12 23:33:39
【问题描述】：

我的vue-应用程序中有一些<div>-元素，我想在其中添加一些pseudo-classes 以显示一些边框。我使用tailwindcss-version 1.9。现在我想添加 first:border-t-0 和 last:border-b-0 - 但由于我不知道的原因，它不起作用。

这是标记

<div class="container flex flex-col" v-for="item in items" :key="item.id">
    <div class="border-t-0 border-b-2 first:border-t-2 last:border-b-0">...some content</div>
</div>

在我的tailwind.config.js 中我在阅读docs 后添加了这个：

module.exports = {
  variants: {
    borderWidth: ['first', 'last'],
  },
}

谁能告诉我我做错了什么？

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

TailwindCSS v2.2.0 现在支持样式化伪元素。如果您使用的是旧版本，但您可以使用 plugins，或者您也可以创建一个可重用的组件

const BorderedDiv= ({ index, content}) => (
  <div classNames="relative ">
    <div className="text-gray-300 absolute" >
     {content}
    </div>
  </div>
);

【讨论】：