Why this code can't fully convert?

[jon9090]

I have this code:

w-full focus-visible:outline-none text-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 flex flex-1 items-center justify-between py-4 px-0.5 font-medium underline-offset-4 hover:underline [&[data-state=open]>[hlmAccordionIcon]]:rotate-180 [&[data-state=open]>[hlmAccIcon]]:rotate-180

The output is:

display: flex; 
padding-left: 0.125rem;
padding-right: 0.125rem; 
padding-top: 1rem;
padding-bottom: 1rem; 
flex: 1 1 0%; 
justify-content: space-between; 
align-items: center; 
width: 100%; 
font-size: 0.875rem;
line-height: 1.25rem; 
font-weight: 500; 
text-underline-offset: 4px; 

:hover {
 text-decoration: underline; 
 }

Why tailwind_to_css doesn't generate the:

.\[\&\[data-state\=open\]\>\[hlmAccordionIcon\]\]\:rotate-180[data-state=open]>[hlmAccordionIcon]{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

as generated css in https://play.tailwindcss.com/ does?