为什么这个演示Demo中 tailwindcss 自定义variant不生效?-灵析社区

项目Demo [https://stackblitz.com/edit/vitejs-vite-avo12b?file=%3D%3D%3D...](https://link.segmentfault.com/?enc=8vPz2xEKKjfH6XBYitfcWw%3D%3D.DfzElZujAbrKc8HA8kJLJQw%2FIr7QeKhufEd6Mu9%2B797YiiHbWNd35buenAuujl%2BTxrOtziA5VpOjM4z54A5m2ipzd9F08vwmaAlWZfFT3v2TciwGWh%2B36rGy0PPfaxqu) 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 两种方式使用自定义变体 HoverOn : The quick brown fox jumps ddover the lazy dog. HoverColor: The quick brown fox jumps ddover the lazy dog. 打开项目 查看 说明.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，他们对应的真实的样式名是什么样的？ 在哪里可以看到相关文档说明？