Back to Blog
Blazity

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.

From Styled-Components to TailwindCSS in Next.js. Meet 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.

We developed a library that aims to offer a bit of assistance in converting your project to TailwindCSS. Here's a simple walkthrough:

  1. (You) Provide the tool with a React component that has styled-components.
  2. It utilizes Babel to convert this component into a JavaScript AST.
  3. It then extracts the TemplateLiterals from the AST and turns them into CSS.
  4. 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 🌀

https://github.com/Blazity/styled2tailwind

Contact us today...

to discuss your web development project and discover how our team can help you achieve your goals.

Tell us about your project

Empower your vision, partner with us today

Author photo
Jakub Czapski
Founding Partner at Blazity
To best serve you, let's get to know your requirements first. Tell us about your project, and we'll arrange a free consultation call to discuss how we can help.

Trusted by:

Trusted by logoTrusted by logoTrusted by logoTrusted by logo
Do you need an NDA first?