如何使用Tailwind CSS v3.41设置相邻元素样式？转换指定CSS规则

要实现这个相邻兄弟选择器的样式，Tailwind提供两种实用方案：

方案一：使用任意变体（无需修改配置） #

适合单次使用的场景，直接在目标div上编写自定义变体：

<p></p>
<div class="[p:empty+&]:text-[20px]">Hello</div>

[p:empty+&]对应CSS中的p:empty+div选择器（&代表当前div元素），text-[20px]是Tailwind设置字体大小的工具类。

方案二：自定义工具类（适合多场景复用） #

如果需要多次使用该样式，可在tailwind.config.js中添加自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    ({ addUtilities }) => {
      addUtilities(
        {
          '.empty-p-next-div': {
            fontSize: '20px',
          },
        },
        {
          condition: ':where(p:empty + &)',
          variants: ['responsive'],
        }
      );
    },
  ],
};

之后在HTML中直接调用自定义类：

<p></p>
<div class="empty-p-next-div">Hello</div>

内容的提问来源于stack exchange，提问作者Александр Кос