咨询：何处可学习应用Tailwind CSS的[&>li]:pt-20类格式化列表？

语法本质 #

[&>li]:pt-20 是Tailwind的**任意变体（Arbitrary Variants）**语法，用来快速定义自定义CSS选择器变体：

• & 代表当前应用该类的元素（示例里是<ul>）
• &>li 等价于CSS中的ul > li，即当前元素的直接子元素<li>
• :pt-20 是Tailwind的内边距类，最终效果就是给<ul>的直接子<li>添加上部内边距

高效使用技巧 #

• 临时场景直接写：如果只是单次使用特定子元素样式，直接用[&>选择器]:工具类的写法，无需额外配置，像你示例里那样直接写在className里就行。
• 复用场景注册自定义变体：如果需要多次用到同一种选择器变体，在tailwind.config.js里注册自定义变体，避免重复写长选择器：

  module.exports = {
    plugins: [
      function({ addVariant }) {
        // 注册一个名为direct-li的变体，对应&>li选择器
        addVariant('direct-li', '&>li');
      },
    ],
  }
  

  之后就可以直接用direct-li:pt-20替代[&>li]:pt-20，代码更简洁。
• 支持复杂选择器组合：除了子元素选择器>，还可以用其他CSS组合器：
  • 相邻兄弟选择器：[&+div]:mt-4（当前元素的下一个div兄弟元素添加上外边距）
  • 通用兄弟选择器：[&~.card]:opacity-70（当前元素之后的所有.card兄弟元素变半透明）
  • 伪类结合：[&:hover>li]:text-blue-600（当前元素hover时，直接子li变蓝色）
• 注意优先级：这种自定义变体的优先级和Tailwind默认变体一致，不会轻易被全局样式覆盖，适合局部样式定制。

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