如何实现Styled Components中~选择器的Tailwind等效代码？

原Styled Components代码的作用是：给基于Item（div类型）的Clone组件设置样式，强制让它之后的所有相邻div兄弟元素取消transform变换：

const Clone = styled(Item)`
  ~ div {
    transform: none !important;
  }
`;

由于Tailwind没有内置相邻兄弟选择器的工具类，以下是两种可行的Tailwind等效实现方案：

方案一：自定义Tailwind工具类（推荐，可复用） #

在项目的tailwind.config.js中添加自定义工具类，把原CSS逻辑封装成可复用的Tailwind类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // 确保覆盖你的组件文件路径
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        '.clone-sibling-reset-transform': {
          '& ~ div': {
            'transform': 'none !important',
          }
        }
      })
    }
  ],
}

之后定义Clone组件时，直接给Item添加这个自定义类即可：

// 假设Item是React组件，直接传递className属性
const Clone = (props) => {
  return <Item {...props} className="clone-sibling-reset-transform" />;
};

方案二：结合@apply写自定义CSS #

如果更习惯在CSS文件中编写样式，可以在全局CSS或组件专属CSS中定义类：

@tailwind base;
@tailwind components;
@tailwind utilities;

.clone-sibling-reset-transform {
  & ~ div {
    @apply transform-none !important;
  }
}

使用方式和方案一完全一致，给Clone组件对应的Item元素添加clone-sibling-reset-transform类即可。

注意事项 #

• 自定义类名可根据项目规范修改，保持语义清晰即可
• !important是原代码中的强制优先级，若需要覆盖其他样式的transform设置，保留该声明是必要的

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