How to style nested elements based on parent class using tailwind css

在Tailwind CSS中，您可以使用 @apply 指令在 CSS 文件中创建组件样式或使用变体，如 hover、focus 等来基于父类设置嵌套元素的样式。但是，标准的 Tailwind CSS 并没有提供直接基于父选择器设置嵌套元素样式的功能，这通常是因为 Tailwind 是一个实用工具优先的框架，它鼓励您直接在 HTML 元素上应用实用类。

然而，Tailwind CSS 提供了一个名为 @layer 的指令，您可以用它来组织您的 CSS 并利用 Tailwind 的 JIT 模式为嵌套选择器提供样式。这可以通过组合父选择器与子选择器实现。这里是一个示例：

css
@layer components {
  .card {
    @apply bg-white rounded-lg shadow-md;

    .card-title {
      @apply text-lg font-bold;
    }

    .card-content {
      @apply text-base;
    }

    .card-footer {
      @apply text-sm text-gray-500;
    }
  }
}

在这个例子中，.card-title、.card-content 和 .card-footer 是嵌套在 .card 类下面的元素的样式。这些样式会在构建过程中与 Tailwind CSS 一起处理，并且他们将仅在父类 .card 存在时应用。

有一点需要注意的是，这种方法需要您在 tailwind.config.js 中启用 JIT 模式，因为标准模式下不支持这种复杂的嵌套。

另外，如果您愿意使用预处理器，如 PostCSS，您可以结合 Tailwind CSS 插件，如 tailwindcss/nesting，它可以让您使用标准的 CSS 嵌套语法来编写嵌套规则，这样可以使得基于父类设置嵌套元素的样式更为简洁明了。

This is possible in tailwind 3.1 with the addition of the arbitrary variants feature. The way you would do this is by using a selector on the parent div:

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

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

In case of Tailwind CSS

Read the descriptive and a very brief documentation entry here: Using arbitrary variants.

As I can see you need to change the color of all the <a> links no matter how deeply they reside in the <cards>. Use an underscore between & and a selectors - [&_a]:text-black. This translates to:

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

On the other hand the Tailwind directive with > between & and a => [&>a]:text-black would result in this css (only the direct child <a> nodes would be styled):

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

Recap: the resulting Tailwind HTML for your case:

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

That's it. I hope it is helpful.

In tailwind v3 you can have arbitrary group selectors. This allows you to specify a how a certain element behaves when nested beneath a parent class.

This is useful when you have a templated element needs to appear different under certain scenarios, but doesn't know anything about its parent context.

It requires the addition of the .group class, but then you can do something like this:

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

Here's an example on Tailwind's playground: https://play.tailwindcss.com/IQ4W4BVdjw