{"id":18291722,"url":"https://github.com/blazity/styled2tailwind","last_synced_at":"2025-10-04T19:37:55.649Z","repository":{"id":187454241,"uuid":"658709394","full_name":"Blazity/styled2tailwind","owner":"Blazity","description":"🌀 Transform your Styled-Components into TailwindCSS with this handy codemod.","archived":false,"fork":false,"pushed_at":"2025-09-30T09:01:22.000Z","size":1698,"stargazers_count":219,"open_issues_count":12,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-30T11:19:12.587Z","etag":null,"topics":["cli","codemod","nextjs","nextjs-tailwind","nextjs13","react","styled-components","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Blazity.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-06-26T10:34:34.000Z","updated_at":"2025-09-29T05:56:37.000Z","dependencies_parsed_at":"2023-08-10T14:34:03.127Z","dependency_job_id":"410657db-e8c7-48b6-9f24-23ec2af2fea3","html_url":"https://github.com/Blazity/styled2tailwind","commit_stats":null,"previous_names":["blazity/styled2tailwind"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Blazity/styled2tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fstyled2tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fstyled2tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fstyled2tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fstyled2tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blazity","download_url":"https://codeload.github.com/Blazity/styled2tailwind/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazity%2Fstyled2tailwind/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278366599,"owners_count":25975091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","codemod","nextjs","nextjs-tailwind","nextjs13","react","styled-components","tailwindcss"],"created_at":"2024-11-05T14:14:57.735Z","updated_at":"2025-10-04T19:37:55.621Z","avatar_url":"https://github.com/Blazity.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eStyled2Tailwind 🌀\u003c/h1\u003e\n  \u003cp\u003eTransform your Styled-Components into TailwindCSS with this handy codemod.\u003c/p\u003e \n\n  \u003cbr /\u003e\n  \n  ![ezgif com-video-to-gif](https://github.com/Blazity/styled2tailwind/assets/28964599/c71c902b-a5d2-4ec4-9e24-b35ec8cef0f4)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/styled2tailwind\"\u003e\u003cimg alt=\"npm version badge\" src=\"https://img.shields.io/npm/v/styled2tailwind\"\u003e\u003c/a\u003e  \n  \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/min/styled2tailwind\"\u003e\n  \u003cimg alt=\"license badge\" src=\"https://img.shields.io/npm/l/styled2tailwind\"\u003e\n  \u003cimg alt=\"GitHub Workflow Status (with event)\" src=\"https://img.shields.io/github/actions/workflow/status/blazity/styled2tailwind/build-and-test-runner\"\u003e\n\u003c/div\u003e\n\n## 🌟 Motivation\n\nWith 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! \n\nWe also love Tailwind and we believe it enhances the development process, making it faster with a superior developer experience. \n\n## 🚀 Getting Started\n1. Begin by giving the repository a star! ⭐\n2. Type the following command to dive into the CLI world:\n   \n```sh\n$ npx styled2tailwind --help\n```\n\n## 🤔 How It Works\n\nOur mechanism runs in four distinct steps:\n\n1. **Raw Input**: We start by taking the RAW React Component as input (make sure it includes some styled components). \n2. **JavaScript AST**: Convert the component to JavaScript AST using Babel. \n3. **From AST to CSS**: Extract all TemplateLiterals data from the AST and morph it into CSS. \n4. **Tailwind Conversion**: The final leg involves converting this CSS into TailwindCSS format.\n\n```mermaid\nflowchart LR\n  RSI(Raw Styled Input) --\u003e JSAST(JavaScript AST)\n  JSAST --\u003e RCSS(Raw CSS)\n  RCSS --\u003e TW(Tailwind CSS)\n```   \n\n## 📋 Commands Overview\n| Command | Description |\n|---------|-------------|\n| `styled2tailwind --help` | Displays help command. |\n| `styled2tailwind \"src/*.jsx\"` | Parses all .jsx files inside src directory (supports regex). |\n| `styled2tailwind \"src/*.jsx\" --no-replace` | Instead of replacing styled components with tailwind, it appends the tailwind output at the end of the file. |\n| `styled2tailwind \"src/*.jsx\" --no-conflicts` | Forcefully replaces styled components with tailwind in the markup without using git conflicts. |\n\n## ⚠️ Limitations\n\nThis project is still in early beta, we already tracked some limitations and we will ship fix for those in very near future!\n\n- **Multi-Line Components**: CLI can act mysteriously while one component is wrapped into multiple lines.\n- **Dynamic React Props**: Handling dynamic React props (especially functions) still poses a challenge.\n\n## 🤝 Contribution\n\nContributions are always welcome! To contribute, please follow these steps:\n\n1. Fork the repository.\n2. Create a new branch with a descriptive name.\n3. Make your changes, and commit them using the [Conventional Commits](https://www.conventionalcommits.org/) format.\n4. Push your changes to the forked repository.\n5. Create a pull request, and we'll review your changes.\n\n## 📡 Community\n\nIf you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: [https://blazity.com/discord](https://blazity.com/discord). It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.\n\n\u003cbr /\u003e\n\u003ca href=\"https://blazity.com/discord\" style=\"width: 100%; display: flex; justify-content: center;\"\u003e\n  \u003cimg src=\"https://discordapp.com/api/guilds/1111676875782234175/widget.png?style=banner2\" alt=\"Blazity Discord Banner\"/\u003e\n\u003c/a\u003e\n\u003cbr /\u003e\n\n## 📜 License\n\nThis project is licensed under the MIT License. For more information, see the [LICENSE](./LICENSE) file.\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazity%2Fstyled2tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblazity%2Fstyled2tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazity%2Fstyled2tailwind/lists"}