关于Tailwind *:修饰符无法设置子元素样式及排除特定元素的问询

方案一：直接使用组合伪类修饰符 #

不用给首尾子元素加bg-none覆盖，直接在父元素上通过*:not(:first-child):not(:last-child)精准选中需要样式的子元素：

<div className="flex min-h-[300px] w-[800px] flex-col gap-7 rounded-3xl bg-[#EFEEEF] p-5 py-6 *:not(:first-child):not(:last-child):bg-white">
  <div className="flex w-full items-center justify-between gap-2">
  </div>
  <div className="flex flex-col gap-8 rounded-3xl border p-4">
  </div>
  <div className="flex flex-col gap-8 rounded-3xl border p-4">
  </div>
  <div className="flex flex-col gap-8 rounded-3xl border p-4">
  </div>
  <div className="flex h-10 gap-3 self-end">
  </div>
</div>

这种写法直接在父元素完成样式范围控制，不需要修改子元素的类名，结构更简洁。

方案二：自定义语义化变体（适合复用场景） #

如果这种「排除首尾子元素」的样式逻辑需要多次使用，可以自定义Tailwind变体，让写法更语义化：

1. 在tailwind.config.js中添加自定义变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  variants: {
    extend: {
      backgroundColor: ['children-not-first-last'],
    },
  },
  plugins: [
    function ({ addVariant }) {
      addVariant('children-not-first-last', '& > *:not(:first-child):not(:last-child)');
    },
  ],
};

2. 之后父元素就可以用自定义修饰符：

<div className="flex min-h-[300px] w-[800px] flex-col gap-7 rounded-3xl bg-[#EFEEEF] p-5 py-6 children-not-first-last:bg-white">
  <!-- 子元素结构不变 -->
</div>

这种方式让样式意图更清晰，后续复用只需调用自定义修饰符即可。

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