为什么这个演示Demo中 tailwindcss 自定义variant不生效?

项目Demo

https://stackblitz.com/edit/vitejs-vite-avo12b?file=%3D%3D%3D...

1. tailwind.config.js 定义自定义变体···const plugin = require('tailwindcss/plugin');/* @type {import('tailwindcss').Config} /

export default { content: ['./index.html'], theme: {

extend: {},

}, plugins: [

plugin(function ({ addVariant, e }) {
  addVariant('hoverColor', ({ modifySelectors, separator }) => {
    return modifySelectors(({ className }) => {
      let res = `.${e(`hoverOn${separator}${className}`)}:hover`;
      //.hoverOn\:text-red-600:hover
      console.log('res', res);
      return res;
    });
  });
}),

],};

···

注意点： 注册名称为hoverColor, 但是 modifySelector返回的 名称是 hoverOn开头

1. index.html 两种方式使用自定义变体

    <p class="hoverOn:text-red-600">
     HoverOn : The quick brown fox jumps ddover the lazy dog.
    </p>
    <p class="hoverColor:text-red-600">
     HoverColor: The quick brown fox jumps ddover the lazy dog.
    </p>
   

打开项目 查看 说明.txt文件，在项目的src/output.css文件中会有 tailwind转换后生成的css文件

问题： 为什么 class="hoverColor:text-red-600" class="hoverOn:text-red-600" 都没有实现 想要的 hover上变红的效果？

我的理解： 生成的css中只有

.hoverOn\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}

index.html中的 两个 p的class 都没有引用到该样式属性。

那么问题是 针对index.html中的 两个class，他们对应的真实的样式名是什么样的？在哪里可以看到相关文档说明？