9 August 2023

From Styled-Components to TailwindCSS in Next.js. Meet Styled2Tailwind.

Styled-Compoenents

Tailwindcss

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.
Bartłomiej Stefański
Bartłomiej Stefański
Head of Engineering
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.

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:


  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.

Gif of

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!

blazity comet

Get a quote

Empower your vision with us today
Brian Grafola, CTO at Vibes

“We are very happy with the outcomes and look forward to continuing to work with them on larger initiatives.”

Brian Grafola

CTO at Vibes

Trusted by
Solana logoVibes logoArthur logoHygraph logo
The contact information is only used to process your request. By clicking send, you agree to allow us to store information in order to process your request.