I’m working with a 3rd party library and to prevent from modifying a lot of unecessary code to change the class names, I’m just thinking about using tailwinds parent selector – group-[.className]:style.
Currently I have a parent class – ".datepicker__month-day--selected", but as I try to use group-".datepicker__month-day--selected]:bg-blue nothing happens. I can’t find any documentation or any workaround for this, should I add something to my tailwind config or not?
<td class="datepicker__month-day datepicker__month-day--visibleMonth datepicker__month-day--valid group datepicker__month-day--selected datepicker__month-day--tmp datepicker__month-day--first-day-selected" daytype="visibleMonth" time="1693861200000" d="3" role="button" index="5" aria-label="Selected as check-in date, Tuesday, September 05, 2023" aria-disabled="false"><div class="group-[.datepicker__month-day--selected]:bg-blue">5</div></td>
Fixed it by escaping the whitespace with
\_due to the underscore and since I was using js I’ve also needed to use String.raw to prevent from stripping the slashes.