From Styled-Components to TailwindCSS in Next.js. Meet Styled2Tailwind.
Styled-Compoenents
Tailwindcss
Styled2Tailwind
When working on Next.js or React.js projects, it's common for developers to use styled-components for their styling needs. They are used by 1% of all publicly crawlable applications. However, as Next.js progresses, the dependence of styled-components on the JS runtime poses challenges, especially when transitioning to the new App Directory routing.
This is where TailwindCSS shines.
Besides having an awesome Developer Experience and an enormous ecosystem, its compatibility with both server and client components in Next.js makes it a preferred choice for many.
But how do you shift from styled-components to TailwindCSS without manually rewriting massive portions of your codebase? In our past projects, we also encountered this question. Back then, we believed it was impossible because the available tools just couldn't give us good enough results.
Enter Styled2Tailwind
We developed a library that aims to offer a bit of assistance in converting your project to TailwindCSS. Here's a simple walkthrough:
- (You) Provide the tool with a React component that has styled-components.
- It utilizes Babel to convert this component into a JavaScript AST.
- It then extracts the TemplateLiterals from the AST and turns them into CSS.
- Finally, this CSS is adapted into the TailwindCSS style and our conversion is done 🧑🚀🚀
It can help make the process smoother than manual conversion in a legible Git Conflicts format.
A Few Hurdles
Although the library is promising, it's still in its beta phase. We've pinpointed certain challenges, particularly with Multi-Line Components and managing dynamic React props. However, as we continue to develop and refine, we're hopeful to overcome these issues in upcoming updates.
Want to Contribute?
We're always looking for ways to improve. We would love to hear any suggestions, insights, or feedback you may have, so please don't hesitate to share. Your input is invaluable to the tool's evolution, and with your help, we can make it more robust for everyone!
Styled2Tailwind
Get a quote
“We are very happy with the outcomes and look forward to continuing to work with them on larger initiatives.”
Brian Grafola
CTO at Vibes
