Open ryanelian opened 6 months ago
I'm encountering difficulties while using the package to convert CSS to Tailwind CSS, particularly in handling nested classes and selectors, for the purpose of converting styled-component based projects to Tailwind CSS.
.myclass { background-color: #007bff; &:hover { background-color: #0056b3; } & > td { text-align: left; } & > * { padding: 0; } & span { font-weight: bold; } & * { font-style: italic } }
Expected output:
bg-[#007bff] hover:bg-[#0056b3] [&>td]:text-left [&>*]:p-0 [&_span]:font-bold [&_*]:italic
Note that Tailwind allows arbitary-variant selectors:
Parsing these CSS snippets, especially those with nested structures, might require PostCSS nested plugin for accurate conversion: https://github.com/postcss/postcss-nested / https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
Could you please address these issues and provide support for converting nested classes and selectors as described above? Thank you!
running into this problem as well
I'm encountering difficulties while using the package to convert CSS to Tailwind CSS, particularly in handling nested classes and selectors, for the purpose of converting styled-component based projects to Tailwind CSS.
Expected output:
Note that Tailwind allows arbitary-variant selectors:
Parsing these CSS snippets, especially those with nested structures, might require PostCSS nested plugin for accurate conversion: https://github.com/postcss/postcss-nested / https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
Could you please address these issues and provide support for converting nested classes and selectors as described above? Thank you!