From Styled-Components to TailwindCSS in Next.js. Meet Styled2Tailwind.
How do you shift from styled-components to TailwindCSS without manually rewriting massive portions of your codebase? We have encountered this question in some of our past projects, so we've created a library that helps with that.
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.
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.
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.
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 🌀
Empower your vision, partner with us today
ㅤ
Trusted by: