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

首先明确核心样式需求：

• 白色背景卡片内所有链接显示为黑色
• 橙色背景卡片内所有链接显示为白色

零配置快速实现（Tailwind v3.0+ 原生支持） #

Tailwind 内置任意变体语法，不需要修改配置、不需要给子链接单独加类，直接在父元素上写类名就能实现和原生CSS嵌套完全一致的效果，核心是用[&_选择器]格式匹配后代元素：

• 白色卡片对应类：bg-white [&_a]:text-black
• 橙色卡片对应类：bg-orange-500 [&_a]:text-white

语法说明：[&_a]里的&代表当前元素本身，下划线代表CSS后代选择器的空格，整段含义是「当前元素下所有层级的<a>标签」，和原生CSS里在父类下写a { color: xxx }的效果完全一致。如果只需要匹配直接子元素的a标签，把下划线换成>即可，即[&>a]:text-black。

直接使用的HTML示例：

<!-- 白色卡片 -->
<div class="bg-white p-4 rounded shadow [&_a]:text-black">
  <p>卡片内容，<a href="#">这是内部链接，显示为黑色</a></p>
</div>

<!-- 橙色卡片 -->
<div class="bg-orange-500 p-4 rounded shadow text-white [&_a]:text-white">
  <p>卡片内容，<a href="#">这是内部链接，显示为白色</a></p>
</div>

复用类名封装（兼容原有原生CSS类名习惯） #

如果你想保留原来的card--primary、card--danger类名，不想在HTML里写过长的类串，可以在项目全局CSS文件里用@layer components做封装：

/* 项目全局tailwind入口文件 */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card--primary {
    @apply bg-white [&_a]:text-black;
    /* 可在这里追加卡片通用样式，比如圆角、阴影、内边距 */
    @apply p-4 rounded shadow;
  }
  .card--danger {
    @apply bg-orange-500 text-white [&_a]:text-white;
    @apply p-4 rounded shadow;
  }
}

封装完成后，HTML里直接加对应类名即可，不需要改动原有DOM结构：

<div class="card--primary">
  <p>白色卡片，<a href="#">链接为黑色</a></p>
</div>
<div class="card--danger">
  <p>橙色卡片，<a href="#">链接为白色</a></p>
</div>

其他原子化框架说明 #

UnoCSS、Windi CSS 这类和Tailwind语法兼容的原子化CSS框架，实现逻辑完全一致，都支持上述任意变体写法，不需要额外调整语法。

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