prefix option + modifier + arbitrary variant: extra prefix is generated for classes inside variant

[jhcarl0814]

prefix: "tw-", + hover:[&.header-is-scrolled_.menu-list_a]:tw-text-[#FF0000]
generates:

.hover\:\[\&\.header-is-scrolled_\.menu-list_a\]\:tw-text-\[\#FF0000\].tw-header-is-scrolled .tw-menu-list a:hover {
  --tw-text-opacity: 1;
  color: rgb(255 0 0 / var(--tw-text-opacity));
}

expected result:

.hover\:\[\&\.header-is-scrolled_\.menu-list_a\]\:tw-text-\[\#FF0000\].header-is-scrolled .menu-list a:hover {
  --tw-text-opacity: 1;
  color: rgb(255 0 0 / var(--tw-text-opacity));
}

Tailwind Play Link

<div class="[&.header-is-scrolled_.menu-list_a]:tw-text-[#FF0000] header-is-scrolled">
  <div class="menu-list">
    <a href="#">abc<-</a>
  </div>
</div>
<div class="[&.header-is-scrolled_.menu-list_a]:tw-text-[#FF0000] header-is-scrolled">
  <div class="tw-menu-list">
    <a href="#">abc</a>
  </div>
</div>
<div class="[&.header-is-scrolled_.menu-list_a]:tw-text-[#FF0000] tw-header-is-scrolled">
  <div class="menu-list">
    <a href="#">abc</a>
  </div>
</div>
<div class="[&.header-is-scrolled_.menu-list_a]:tw-text-[#FF0000] tw-header-is-scrolled">
  <div class="tw-menu-list">
    <a href="#">abc</a>
  </div>
</div>

<div class="hover:[&.header-is-scrolled_.menu-list_a]:tw-text-[#FF0000] header-is-scrolled">
  <div class="menu-list">
    <a href="#">abc</a>
  </div>
</div>
<div class="hover:[&.header-is-scrolled_.menu-list_a]:tw-text-[#FF0000] header-is-scrolled">
  <div class="tw-menu-list">
    <a href="#">abc</a>
  </div>
</div>
<div class="hover:[&.header-is-scrolled_.menu-list_a]:tw-text-[#FF0000] tw-header-is-scrolled">
  <div class="menu-list">
    <a href="#">abc</a>
  </div>
</div>
<div class="hover:[&.header-is-scrolled_.menu-list_a]:tw-text-[#FF0000] tw-header-is-scrolled">
  <div class="tw-menu-list">
    <a href="#">abc<-</a>
  </div>
</div>

[cristianstu]

I think I'm having a similar issue with group

This is not working:

<div class="tw-group is-published">
  <div class="tw-hidden group-[.is-published]:block">
    Published
  </div>
</div>

But found this is working:

<div class="tw-group tw-is-published">
  <div class="tw-hidden group-[.is-published]:block">
    Published
  </div>
</div>

Is this the same issue?

[thecrypticace]

Hey! Thank you for reporting this. It made us realize there were two bugs lurking here and so we ended up fixing both! :D

The fix from #10214 has been merged and will be available in our next release. In the meantime you can test it using our insiders build: npm install tailwindcss@insiders (should be available in a few minutes)

[iwarshak]

Hi. Even using the insiders build on Tailwind Play, I am still running into an issue where TW is adding a prefix in a place where it isn't expected.

In my case, I am using Phoenix LiveView, which will add a phx-click-loading class to an element that is clicked. I have added the variant so that I can style the element when the phx-click-loading class is present. phx-click-loading is one of several classes that Phoenix can add to an element.

plugin(({ addVariant }) =>
  addVariant('phx-click-loading', ['&.phx-click-loading'])
)

and this works perfect when I am not using a prefix. When I am using a prefix though, it is incorrectly adding the prefix to part of the generated class.

I am expecting it to add:

.phx-click-loading\:tw-animate-spin.phx-click-loading {
  animation: tw-spin 1s linear infinite;
}

but instead it is adding

.phx-click-loading\:tw-animate-spin.tw-phx-click-loading {
  animation: tw-spin 1s linear infinite;
}

I created an example in Tailwind Play (using the insiders build which looks like it has (#10214) pulled in: https://play.tailwindcss.com/eBTOwTZWJ3?file=config

[jhcarl0814]

@thecrypticace Seems extra prefix is generated for classes inside "plugin-registered" variant. Should we reopen this issue or open another issue?

[thecrypticace]

@iwarshak @jhcarl0814 Prefixing classes in addVariant and matchVariant is by-design. Tailwind itself makes use of this behavior for group and peer variants. We do have an existing respectPrefix: false option for utilities and components. It's possible we could introduce this for variants as well. I'll start the discussion for this internally. In the meantime could you open a discussion for a new feature and @-mention me there please? It'll help keep track of it instead of discussing in a closed issue.

[adamwathan]

@iwarshak One way to get around this (we do this in the typography plugin even) is to use an attribute selector for your variant:

plugin(({ addVariant }) =>
  addVariant('phx-click-loading', ['&[class~=“phx-click-loading”]'])
)

That’s the easiest way to opt-out of prefixing on a per-selector basis 👍🏻

[iwarshak]

@adamwathan This seems to do the trick, thanks!, But to be honest I have been using TW for a couple years now and this was not super obvious to me.

[emin-alizada]

I think I'm having a similar issue with group

This is not working:

<div class="tw-group is-published">
  <div class="tw-hidden group-[.is-published]:block">
    Published
  </div>
</div>

But found this is working:

<div class="tw-group tw-is-published">
  <div class="tw-hidden group-[.is-published]:block">
    Published
  </div>
</div>

Is this the same issue?

I still get this problem, is there any workaround to this, because adding tw- to non tailwind class is not an ideal way to go.

[jhcarl0814]

@emin-alizada @thecrypticace

prefix: "tw-", + group-[.is-published]:tw-block
generates:

.tw-group.tw-is-published .group-\[\.is-published\]\:tw-block {
  display: block;
}

expected result:

.tw-group.is-published .group-\[\.is-published\]\:tw-block {
  display: block;
}

(Changing from group-[.is-published]:tw-block to group-[[class~=is-published]]:tw-block (thanks to @adamwathan ) will work.)

Tailwind Play Link

[emin-alizada]

@emin-alizada @thecrypticace

prefix: "tw-", + group-[.is-published]:tw-block generates:

.tw-group.tw-is-published .group-\[\.is-published\]\:tw-block {
  display: block;
}

expected result:

.tw-group.is-published .group-\[\.is-published\]\:tw-block {
  display: block;
}

(Changing from group-[.is-published]:tw-block to group-[[class~=is-published]]:tw-block (thanks to @adamwathan ) will work.)

Tailwind Play Link

Thank you very much!