如何使用 Tailwind CSS 根据父类为嵌套元素设置样式？

Question

假设我想让白色卡片内的所有链接都是黑色的，并且橙色卡片内的所有链接都是白色的。我可以轻松使用纯CSS实现：

.card--primary {
  background-color: white;

  a {
    color: black
  }
}

.card--danger {
  background-color: orange;
  
  a {
    color: white;
  }
}

但是我如何使用Tailwind（或其他CSS实用程序框架）来实现类似的行为呢？

- Andrew

Answer 1

在Tailwind 3.1中，通过添加任意变体功能，这是可能的。实现这个功能的方法是在父级div上使用选择器：

<div className="card--primary bg-white [&>a]:text-black" >
  <a/>
  <a/>
<div/>

<div className="card--danger bg-orange [&>a]:text-white" >
  <a/>
  <a/>
<div/>

- OneTuskedMario

---

你能在这里分享参考链接吗？ - VMM

@VMM 给你：https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants - OneTuskedMario

有用的例子：className=" [&>span>svg_path]:hover:fill-[#F80000]" - mohammad barzegar

Answer 2

如果使用 Tailwind CSS

在这里阅读详细且简明的文档条目：使用任意变体。

根据我所看到的，您需要更改所有 <a> 链接的颜色，无论它们在 <cards> 中深层嵌套。在 [&_a]:text-black 之间使用下划线连接 & 和 a 选择器 - 这将被翻译为：

.card--primary {
      
  /* arbitrarily nested <a> links */
  a {
    color: black
  }
}

另一方面，Tailwind指令使用>在&和a之间的写法为[&>a]:text-black将得到以下CSS（只会对直接子节点<a>进行样式设置）：

.card--primary {
      
  /* direct-child <a> links */
  > a {
    color: black
  }
}

总结：您的情况下生成的Tailwind HTML代码如下：

<div className="card--primary [&_a]:text-black" >
  <a></a> !-- will be black
  <div>
    <a></a> !-- will be black
  </div>
<div/>

<div className="card--danger [&_a]:text-white" >
  <a></a> !-- will be white
  <div>
    <a></a> !-- will be white
  </div>
<div/>

就是这样。希望对你有所帮助。

- Zmyślny

Answer 3

在Tailwind v3中，您可以拥有任意组选择器。这使您可以指定某个元素在嵌套在父类下方时的行为方式。

当您需要一个模板元素在某些情况下呈现不同但不知道其父级上下文时，这非常有用。

它需要添加.group类，但然后您可以执行以下操作：

<div class="card">
  <a href="#" class="text-black group-[.card--danger]:text-white">
    Normal Card
  </a>
</div>
<div class="card group card--danger bg-orange-600">
  <a href="#" class="text-black group-[.card--danger]:text-white">Danger Card</a>
</div>

这是一个关于Tailwind的示例，可以在其playground上查看：https://play.tailwindcss.com/IQ4W4BVdjw。

- Jeff Landfried

---

这很干净。谢谢！ - yuji

Answer 4

我明白你们每个人的想法，但如果你们只想使用Tailwind来实现它：

<div class="bg-white text-black">
  <a></a>
  <a></a>
</div>
<div class="bg-black text-white">
  <a></a>
  <a></a>
</div>

其他人的答案似乎有点臃肿。

- Sam Britt

Answer 5

你可以这样做

<script src="https://cdn.tailwindcss.com"></script>
<div class="relative bg-slate-100 flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12 space-y-9">
<div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base">
          <p>White Card with all black links:</p>
          <ul class="space-y-4">
            <li class="flex items-center">
              
              <a href="https://tailwindcss.com"> First Link</a>
            </li>
            <li class="flex items-center">
              
               <a href="https://tailwindcss.com"> Second Link</a>
            </li>
            <li class="flex items-center">
              
               <a href="https://tailwindcss.com"> Third Link</a>
            </li>
          </ul>
          </div>
       
      </div>
    </div>
  </div>


  <div class="relative bg-orange-700 px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base text-white">
          <p>Orange Card with all white links:</p>
          <ul class="space-y-4">
            <li class="flex items-center">
              
              <a href="https://tailwindcss.com"> First Link</a>
            </li>
            <li class="flex items-center">
              
               <a href="https://tailwindcss.com"> Second Link</a>
            </li>
            <li class="flex items-center">
              
               <a href="https://tailwindcss.com"> Third Link</a>
            </li>
          </ul>
          </div>
       
      </div>
    </div>
  </div>
</div>

- MagnusEffect