如何使用 Tailwind CSS 为基于父类的嵌套元素设置样式？

Question

假设我希望白卡内的所有链接都是黑色的，橙色卡内的所有链接都是白色的。我可以用纯 CSS 轻松做到：

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

  a {
    color: black
  }
}

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

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

Answer 1

通过添加任意变体功能，这在顺风 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/>

Answer 2

在 Tailwind CSS 的情况下

在此处阅读描述性和非常简短的文档条目：Using arbitrary variants。

正如我所看到的，您需要更改所有<a> 链接的颜色，无论它们在<cards> 中的位置有多深。在 & 和 a 选择器之间使用下划线 - [&_a]:text-black。这转化为：

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

另一方面，& 和 a => [&>a]:text-black 之间的 > 的 Tailwind 指令将导致这个 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/>

而已。我希望它是有帮助的。

Answer 3

你可以这样做

<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>