Tailwind CSS converter not generating classes for all CSS properties with arbitrary variants

[ryanelian]

Current Behavior

When applying the provided CSS styles to the converter:

color: #666;
& > td {
  text-align: left;
  padding: 20px;
  vertical-align: top;
  border-top: 0;
}

The CSS to Tailwind CSS converter only outputs text-[#666] for the color property, but doesn't generate classes for child <td> like text-align, padding, vertical-align, and border-top. Additionally, it does not generate a class for the td selector with the arbitrary variant.

https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

https://stackoverflow.com/a/72683383

I know that this is not the recommended way of doing things in Tailwind, but I am trying to create a converter from styled-components to Tailwind and I need this feature to ensure I can migrate many features in the codebase safely. For example:

// A table body with child td selector
export const Tbody = styled.tbody`
  color: #666;
  & > td {
    text-align: left;
    padding: 20px;
    vertical-align: top;
    border-top: 0;
  }
`;

Gets converted into:

// A table body with child td selector
export const Tbody = React.forwardRef((props: React.ComponentPropsWithoutRef<"tbody">, ref: React.ComponentProps<"tbody">["ref"]) => {
  return(
     <tbody className="text-[#666]" ref={ref} {...props}>
      {props.children}
    </tbody>
  );
});

Expected Behavior

I expect the CSS to Tailwind CSS converter to generate appropriate classes for all the CSS properties provided, not just for the color property. For example, it should generate classes like [&>td]:text-left for the child td component:

Steps to Reproduce the Problem

1. Input the above CSS to Tailwind CSS Converter
2. Observe the output to be only text-[#666] and does not contain classes for arbitary variants like [&>td]:text-left

Environment

• Version: "css-to-tailwindcss": "1.0.5"
• Platform: Windows, Mac
• Node.js Version: v20.11.1