如何用Tailwind实现.child:not(:last-child):hover > img样式？

要实现你要的.child:not(:last-child):hover > img { transform: translateX(-10px); }效果，Tailwind有两种可行方案：

方案一：使用任意变体（无需额外配置） #

直接在.child元素上使用Tailwind的任意变体语法，把选择器逻辑写在类里：

<div class="parent">
  <div class="child hover:[&:not(:last-child)>img]:translate-x-[-10px]">
    <img src="你的图片地址" alt="图片描述">
  </div>
  <div class="child hover:[&:not(:last-child)>img]:translate-x-[-10px]">
    <img src="你的图片地址" alt="图片描述">
  </div>
  <div class="child">
    <img src="你的图片地址" alt="图片描述">
  </div>
</div>

这里的hover:[&:not(:last-child)>img]:translate-x-[-10px]等价于目标CSS逻辑：当当前.child元素不是父元素的最后一个子元素，且处于hover状态时，它的直接子元素img向左平移10px。

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

如果这个效果需要在多个地方复用，推荐在tailwind.config.js中自定义一个变体，让代码更简洁：

1. 修改Tailwind配置文件 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    function({ addVariant, e }) {
      addVariant('not-last-hover-img', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`not-last-hover-img${separator}${className}`)}:not(:last-child):hover > img`;
        });
      });
    },
  ],
}

2. 在HTML中使用自定义变体 #

<div class="parent">
  <div class="child not-last-hover-img:translate-x-[-10px]">
    <img src="你的图片地址" alt="图片描述">
  </div>
  <div class="child not-last-hover-img:translate-x-[-10px]">
    <img src="你的图片地址" alt="图片描述">
  </div>
  <div class="child">
    <img src="你的图片地址" alt="图片描述">
  </div>
</div>

后续需要复用该效果时，只需给.child元素添加not-last-hover-img:translate-x-[-10px]类即可，代码可读性更强。

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