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?

[ADTC]

Looks like focus-visible:ring-ring is wrong. Did you mean focus-visible:ring?

If you change it to the above or remove it, everything else works correctly in my non-cheatsheet version: https://tailwind-to-css-three.vercel.app/

w-full focus-visible:outline-none text-sm focus-visible:ring-1 focus-visible: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

gives:

.generated {
  display: flex;
  width: 100%;
  flex: 1 1 0%;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-underline-offset: 4px
}
.generated:hover {
  text-decoration-line: underline
}
.generated:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px
}
.generated[data-state=open]>[hlmAccIcon] {
  --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))
}
.generated[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))
}

[ADTC]

I've enhanced my version now to report any unrecognized classes, so for your original input, you'll now get an output like this:

.focus-visible:ring-ring {
  /* Custom classes not found in Tailwind CSS */;
}

.generated {
  /* ... the rest of the CSS ... */
}

This shows that .focus-visible:ring-ring is not recognized by Tailwind CSS as a valid Tailwind class, hopefully prompting you to correct the input. 🙂