search

JNavith / tailwindcss-theme-variants

Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS
https://tailwindcss-theme-variants.web.app/
MIT License
188 stars 5 forks source link

[JIT] group variants like group-hover not working #14

Open Kuirak opened 3 years ago

Kuirak commented 3 years ago

Hello,

group variants like group-hover or group-focus are generating wrong css with tailwindcss-theme-variants plugin. I don't know if it is a bug in this repo or in tailwindcss JIT bug so I will cross post it

Here is a reproduction repo: https://github.com/Kuirak/jit-tailwindcss-theme-variants/

Expected Output:

:root.dark-theme .dark\:group:hover .dark\:group-hover\:bg-amber-300 {
    --tw-bg-opacity: 1;
    background-color: rgba(252, 211, 77, var(--tw-bg-opacity));
}

Output 

:root.dark-theme .dark\:group:hover .group-hover\:bg-teal-300 {
    --tw-bg-opacity: 1;
    background-color: rgba(94, 234, 212, var(--tw-bg-opacity));
}

:root.dark-theme .dark\:group:hover .group-hover\:bg-amber-300 {
    --tw-bg-opacity: 1;
    background-color: rgba(252, 211, 77, var(--tw-bg-opacity));
}
JNavith commented 3 years ago

This is within this plugin's realm to fix. That'll be a TODO.

It shouldn't be that hard to solve but might be a breaking change, so I might bundle it up with the other changes I have planned for 2.0.

Kuirak commented 3 years ago

Good to hear, do you have a rough ETA of 2.0?

After thinking about it some more I think the expected selector output should be:

:root.dark-theme .dark\:group:hover .dark\:group-hover\:bg-amber-300