如何在Tailwind中组合:has等任意值实现无子女元素隐藏

• 需求：实现元素无任何子元素时自动隐藏的效果
• 纯CSS实现代码：

  &:not(:has(*)){
    display: none
  }
  

• Tailwind中尝试的无效写法：

  [&:not(:has(*)):hidden] 
  
  [&:not([&:has(*)]):hidden]
  

• 疑问：Tailwind中是否存在组合多个任意值的可行方法？

方法1：直接使用自定义任意变体 #

在元素的class中直接写自定义选择器变体，正确写法为：

class="[&:not(:has(*))]:hidden"

该写法会让Tailwind解析出「当元素无任何子元素时应用hidden类」的样式逻辑，完全对应你原本的纯CSS需求。

方法2：自定义全局变体（复用场景） #

如果需要在多个元素上复用这个逻辑，可以在tailwind.config.js中添加自定义变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    ({ addVariant }) => {
      addVariant('empty', '&:not(:has(*))');
    }
  ],
}

配置完成后，就可以直接使用更简洁的类名：

class="empty:hidden"

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