如何在Tailwind CSS中为ul列表跳过前3项设置分隔线

我想要为ul列表设置分隔线，但希望跳过前3个li项不显示分隔线，目前无法实现该效果。

我的HTML结构如下：

<ul>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
   <li>YES divider</li>
</ul>

我使用Tailwind CSS编写的初始样式为：

ul {
   @apply divide-y;
}

但这样无法跳过前3个li项，我尝试了多种如下写法的变体，但均未成功：

ul > li:not(:nth-child(-n + 3)) {
  @apply divide-y;
}

请问该如何实现需求？

Tailwind的divide-y是给容器内除第一个子元素外的所有子元素添加上边框来实现分隔线效果，直接给li加divide-y无效，得换思路：只给第4个及以后的li添加上边框。

方法一：CSS选择器直接控制（最简洁） #

去掉ul的divide-y，直接给第4个及之后的li添加上边框：

ul > li:nth-child(n + 4) {
  @apply border-t border-gray-200; /* 可自定义边框颜色 */
}

通过nth-child(n + 4)精准选中第4个及以后的li，给它们添加上边框，完美跳过前3个li。

方法二：HTML内直接加类（无需额外CSS） #

如果不想写自定义CSS，也可以直接在HTML里给目标li加边框类：

<ul>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li class="border-t border-gray-200">YES divider</li>
   <li class="border-t border-gray-200">YES divider</li>
   <li class="border-t border-gray-200">YES divider</li>
   <li class="border-t border-gray-200">YES divider</li>
   <li class="border-t border-gray-200">YES divider</li>
</ul>

方法三：自定义Tailwind变体（适合复用场景） #

如果需要频繁用到这个效果，可以在tailwind.config.js中添加自定义变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function({ addVariant, e }) {
      addVariant('after-3rd', ({ modifySelectors }) => {
        modifySelectors(({ className }) => {
          return `.${e(`after-3rd:${className}`)}:nth-child(n + 4)`;
        });
      });
    },
  ],
};

之后就能在HTML里直接用自定义类：

<ul>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li>NO divider here</li>
   <li class="after-3rd:border-t after-3rd:border-gray-200">YES divider</li>
   <li class="after-3rd:border-t after-3rd:border-gray-200">YES divider</li>
   <li class="after-3rd:border-t after-3rd:border-gray-200">YES divider</li>
   <li class="after-3rd:border-t after-3rd:border-gray-200">YES divider</li>
   <li class="after-3rd:border-t after-3rd:border-gray-200">YES divider</li>
</ul>

内容的提问来源于stack exchange，提问作者Boq7