如何在 Tailwindcss 中基于父类显示元素答案

【问题标题】：How To Have An Element Show Based On Parent Class In Tailwindcss如何在 Tailwindcss 中基于父类显示元素
【发布时间】：2022-01-11 12:47:48
【问题描述】：

我已经在顺风中设置了一个组悬停类，所以当一个 li 悬停一个子跨度显示时，我还会在需要时向 li 添加一个“活动”类。我需要的是当活动类出现在 li 上时，子跨度也是可见的。有人可以指出我该怎么做，因为我有点卡住了。

下面的工作正常，只是不知道如何添加上面的。

variants: {
        extend: {
            fontFamily: ['hover', 'focus'],
            borderWidth: ['hover', 'focus'],
            display: ['group-hover']
        },
    },

【问题讨论】：

请提供您的代码 ;-)

标签： tailwind-css

【解决方案1】：

你可以这样做

 <div class="bg-green-200 group">
  <button class="text-gray-700 font-semibold py-2 px-4 rounded inline-flex items-center">
    <span class="mr-1">Dropdown</span>
    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
    </svg>
  </button>
  <ul class="group-hover:block hidden text-gray-700 pt-1 bg-green-50">
    <li class=""><a class="py-2 px-4 block whitespace-no-wrap" href="#">One</a></li>
    <li class=""><a class="py-2 px-4 block whitespace-no-wrap" href="#">Two</a></li>
    <li class=""><a class="py-2 px-4 block whitespace-no-wrap" href="#">Three is the magic number</a></li>
  </ul>
</div>

【讨论】：

【解决方案2】：

您可以使用显示实用程序在可见和不可见元素之间切换。所以为了隐藏一个元素，给它类hidden，然后显示它，添加一个group-hover前缀到block、flex、grid等...

<ul class='group'>
  <li class='hidden group-hover:block'> </li>
  <li class='hidden group-hover:block'> </li>
</ul>

【讨论】：