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

Question

项目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开头

2. 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，他们对应的真实的样式名是什么样的？
在哪里可以看到相关文档说明？

Answer 1

对于 hoverOn:text-red-600，没有找到 hoverOn 的变体，所以没有生成样式；

对于 hoverColor:text-red-600，根据你的代码，将生成 `.${e(`hoverOn${separator}${className}`)}:hover` ，即 .hoverOn\:text-red-600:hover；

注意，此处生成的样式使得上一个 p 元素被 hover 时文本变为红色

对于 hocus:text-green-500，将生成 .hocus\:text-green-500:focus 和 .hocus\:text-green-500:hover；

Tailwind Play