如何在Tailwind中基于父类自定义类设置子元素条件样式？

当然可以实现，用Tailwind的自定义变体就能做到类似parent-small:p-0的写法，完全不用写大量重复CSS。

具体实现步骤： #

1. 在Tailwind配置文件中注册自定义变体
   打开tailwind.config.js，通过addVariant方法添加针对父元素small类的变体：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     theme: {
       extend: {},
     },
     plugins: [
       function({ addVariant }) {
         // 推荐用这个兼容写法，适配所有主流浏览器
         addVariant('parent-small', '.small &');
         // 注：:parent()伪类目前未成为标准，浏览器支持有限，不推荐使用：
         // addVariant('parent-small', ':parent(.small) &');
       }
     ],
   }
   

2. 在HTML中直接使用自定义变体类
   当父元素带有small类时，子元素添加parent-small:p-0就能生效：

   <div class="small">
     <p class="p-4 parent-small:p-0">示例文本</p>
   </div>
   

原理说明 #

这种写法本质是让Tailwind自动生成.small .parent-small\:p-0这样的CSS选择器，精准匹配父元素含small类的子元素，完全替代手动编写重复的CSS规则。

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