Search code examples
csstailwind-css

Tailwind CSS group-hover not working with custom prefix

I'm using Tailwind CSS with a custom prefix tw- for all classes. However, I'm having trouble getting the group-hover functionality to work correctly. Here's the code I'm working with:

<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>

I've also tried

<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>

The following works without a prefix

<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>

Solution

  • As per the documentation:

    It’s important to understand that this prefix is added after any variant modifiers. That means that classes with responsive or state modifiers like sm: or hover: will still have the responsive or state modifier first, with your custom prefix appearing after the colon:

    <div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

    So for your situation, it would generally be group-hover:tw-<class name>:

    tailwind.config = { prefix: 'tw-' }
    <script src="https://cdn.tailwindcss.com/3.2.4"></script>

<div class="tw-flex tw-h-screen tw-justify-center tw-items-center">
  <div class="tw-group tw-text-xl">
    <strong class="group-hover:tw-text-red-500">Hover on me </strong>
    <strong class="group-hover:tw-text-green-500">the texts will be </strong>
    <strong class="group-hover:tw-text-blue-500">of different colors</strong>
  </div>
</div>