{"repo":"Blazity/styled2tailwind","free":true,"listed":false,"github":"https://github.com/Blazity/styled2tailwind","clone":"git clone https://github.com/Blazity/styled2tailwind.git","description":"🌀 Transform your Styled-Components into TailwindCSS with this handy codemod.","language":"TypeScript","stars":220,"topics":["cli","codemod","nextjs","nextjs-tailwind","nextjs13","react","styled-components","tailwindcss"],"license":"MIT","category":"cli-tools","readme_excerpt":"Styled2Tailwind 🌀 Transform your Styled-Components into TailwindCSS with this handy codemod. 🌟 Motivation With Next.js introducing the new App Directory routing, it also introduced support for Server and Client components. Styled-components don't gel well with server components due to their heavy reliance on the JS runtime. Tailwind, on the other hand, slides right in and performs beautifully! We also love Tailwind and we believe it enhances the development process, making it faster with a superior developer experience. 🚀 Getting Started 1. Begin by giving the repository a star! ⭐ 2. Type the following command to dive into the CLI world: 🤔 How It Works Our mechanism runs in four distinct steps: 1. Raw Input : We start by taking the RAW React Component as input (make sure it includes some styled components). 2. JavaScript AST : Convert the component to JavaScript AST using Babel. 3. From AST to CSS : Extract all TemplateLiterals data from the AST and morph it into CSS. 4. Tailwind Conversion : The final leg involves converting this CSS into TailwindCSS format. 📋 Commands Overview Command Description --------- ------------- styled2tailwind --help Displays help command. styled2tailwind \"src/ .jsx\" Parses all .jsx files inside src directory (supports regex). styled2tailwind \"src/ .jsx\" --no-replace Instead of replacing styled components with tailwind, it appends the tailwind output at the end of the file. styled2tailwind \"src/ .jsx\" --no-conflicts Forcefully replaces styled ","default_branch":null,"files":null,"tree":[],"storefront":"/r/Blazity","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Blazity/styled2tailwind/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}