我正在使用 Tailwind CSS 以及所有类的自定义前缀tw-
。但是,我无法使组悬停功能正常工作。这是我正在使用的代码:
<script src="https://cdn.tailwindcss.com/3.2.4"></script>
<script>
tailwind.config = { prefix: 'tw-' }
</script>
<div class="tw-flex tw-h-screen tw-justify-center tw-items-center">
<div class="tw-group tw-text-xl">
<strong class="tw-group-hover:tw-text-red-500">Hover on me </strong>
<strong class="tw-group-hover:tw-text-green-500">the texts will be </strong>
<strong class="tw-group-hover:tw-text-blue-500">of different colors</strong>
</div>
</div>
我也尝试过
<script src="https://cdn.tailwindcss.com/3.2.4"></script>
<script>
tailwind.config = { prefix: 'tw-' }
</script>
<div class="tw-flex tw-h-screen tw-justify-center tw-items-center">
<div class="tw-group tw-text-xl">
<strong class="tw-group-hover:text-red-500">Hover on me </strong>
<strong class="tw-group-hover:text-green-500">the texts will be </strong>
<strong class="tw-group-hover:ext-blue-500">of different colors</strong>
</div>
</div>
以下作品没有前缀
<script src="https://cdn.tailwindcss.com/3.2.4"></script>
<div class="flex h-screen justify-center items-center">
<div class="group text-xl">
<strong class="group-hover:text-red-500">Hover on me </strong>
<strong class="group-hover:text-green-500">the texts will be </strong>
<strong class="group-hover:text-blue-500">of different colors</strong>
</div>
</div>