如何在Tailwind CSS中为父元素的子元素设置样式？

Tailwind CSS提供了多种灵活的方式给父元素的子元素设置样式，以下是几种常用方案：

1. 统一设置所有直接子元素样式 #

通过自定义选择器[&>*]，可以快速给父元素的所有直接子元素批量应用样式，无需给每个子元素单独加类：

<div class="[&>*]:p-4 [&>*]:bg-gray-100 [&>*]:rounded-md">
  <p>第一个子元素</p>
  <span>第二个子元素</span>
  <div>第三个子元素</div>
</div>

这里[&>*]表示匹配当前父元素下的所有直接子元素，后续的p-4、bg-gray-100等样式会统一应用到这些子元素上。

2. 给特定类型的子元素设置样式 #

如果只想针对某类标签的子元素设置样式，可以在自定义选择器中指定标签类型：

<div class="[&>p]:font-bold [&>p]:text-red-600 [&>span]:italic [&>span]:text-gray-500">
  <p>这段文字会加粗变红</p>
  <span>这段文字会变灰斜体</span>
  <div>这个div不受影响</div>
</div>

3. 按位置选择子元素 #

利用Tailwind内置的伪类变体（如first:、last:、even:、odd:）或自定义选择器，可以按位置精准控制子元素样式：

方式一：子元素直接加伪类前缀 #

<div class="space-y-2">
  <div class="first:bg-blue-500 p-2 text-white">第一个子元素</div>
  <div class="p-2 bg-gray-200">第二个子元素</div>
  <div class="last:bg-purple-500 p-2 text-white">最后一个子元素</div>
</div>

方式二：父元素统一控制位置样式 #

<div class="[&>:nth-child(2)]:border-2 [&>:nth-child(2)]:border-green-500 space-y-2">
  <div class="p-2">第一个子元素</div>
  <div class="p-2">第二个子元素（带绿色边框）</div>
  <div class="p-2">第三个子元素</div>
</div>

4. 父元素状态触发子元素样式变化 #

可以给父元素添加状态选择器，触发子元素的样式变更，比如hover、focus状态：

<div class="[&:hover>*]:text-yellow-500 [&:hover>*]:font-medium p-4 border rounded-md">
  <p>鼠标悬停父元素时，我会变黄加粗</p>
  <span>我也会跟着变哦</span>
</div>

5. 提取复用样式（批量场景） #

如果需要在多个父元素上复用相同的子元素样式，可以用@apply在自定义CSS中提取组合样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

.child-styled-parent {
  @apply [&>*]:p-3 [&>*]:rounded-md [&>p]:bg-blue-100;
}

之后在HTML中直接使用这个自定义类即可：

<div class="child-styled-parent">
  <p>带浅蓝色背景的段落</p>
  <div>普通样式的div</div>
</div>

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