TailwindCSS 如何使用 not 操作符？

Tailwind CSS 是一个实用工具优先的 CSS 框架，它允许你用功能类来快速构建设计。在 Tailwind 中，not 操作符是一个变体，通常用来表示某个样式仅在其后的类不适用时才应用。换句话说，not 操作符允许您创建一个反向选择器，仅在没有指定类时应用样式。

css
/* 示例: 使用 not 操作符 */
.input:not(.disabled) {
  /* 应用样式，只要元素没有被禁用 */
}

在 Tailwind CSS 中，not 操作符通常在配置文件中的变体部分启用，以便在构建实用的类时使用。例如，如果你想对非禁用按钮应用某些样式，你需要首先在 tailwind.config.js 文件中启用 not 操作符：

javascript
// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      backgroundColor: ['not-disabled'], // 在这里启用 not-disabled 变体
    },
  },
  // ...
};

然后，你可以在 HTML 中使用 not-disabled 变体来应用样式：

html
<button class="bg-blue-500 text-white not-disabled:bg-green-500">Button</button>

在这个例子中，not-disabled:bg-green-500 这个类将应用绿色背景，但仅当按钮没有被禁用时。如果按钮上有 disabled 类，则不会应用绿色背景，因为 not-disabled 变体表明这个样式应该在没有 disabled 类的情况下应用。

The answer is in the link to last in the docs, that you shared.

Just add last:border-b-0 to all list items, and it will remove the border-bottom if it is the last-child.

shell
<ul>
  <li
    v-for="(item, index) in items"
    :key="`item-${index}`"
    class="border-solid border-b border-black last:border-b-0"
  >
    Item
  </li>
</ul>

You can use Tailwind arbitrary variants:

shell
<li class="[&:not(:last-child)]:border border-sky-500">Item</li>

This is available since Tailwind v3.

We could also do this by selecting the index number we want to edit

EXAMPLE: I will change the first one, and all the following should have a style

shell
<div
    v-for="(item, i) in items"
    :key="i"
    :class="{ 'mx-0': i === 0, 'mx-4': i > 0 }"
>
</div>

so the FIRST element has an index from 0, and therefore we will have a margin x 0,

and all of the following would have margin x 4.