React项目中如何为DOM指定区域应用Tailwind CSS样式？

• 常规场景优先直接给目标元素加类：你示例里要实现.part1 h2 {font-weight: 700}的效果，最符合Tailwind设计思路的写法就是直接给对应的h2元素加font-bold工具类，你贴的示例DOM里其实已经给这个h2加了font-bold类，本身就已经达到你要的效果了。
• 如果需要给父容器下所有匹配的后代元素统一加样式，不想逐个给子元素加类，可以用Tailwind的任意值选择器变体，直接写在父元素的class里就行：
  给class为part1的div加[&_h2]:font-bold类即可，这个写法的选择器逻辑就是「当前元素下所有h2后代元素应用font-bold样式」，最终编译出来的CSS和你写的原生规则完全一致。
  对应DOM写法参考：

  <body>
    <div class="part1 [&_h2]:font-bold">
       <h2>This is part1 of the application.</h2>
       <!-- 这个容器里后续加的所有h2标签都会自动加粗，不用单独加类 -->
    </div>
    <div class="part2">
       ...part2内容
    </div>
  </body>
  

• 如果这类区域统一样式是全局固定的，也可以在Tailwind的全局样式入口文件里通过@layer定义样式，适合需要全局复用的规则：

  @layer components {
    .part1 h2 {
      @apply font-bold;
    }
  }
  

  注意不要直接裸写原生CSS规则，要放在@layer块里，不然Tailwind没法正确处理样式优先级，容易出现样式被覆盖的问题。

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