访问官网
Github
文档Styled2Tailwind 🌀
使用这个便捷的代码转换工具，将你的Styled-Components转换为TailwindCSS。
🌟 动机
随着Next.js引入新的App Directory路由，它同时也引入了对服务器和客户端组件的支持。由于styled-components严重依赖JS运行时，它与服务器组件不太兼容。相比之下，Tailwind可以完美融入并表现出色！
我们也喜欢Tailwind，我们相信它能提升开发过程，使之更快速，并提供更优秀的开发者体验。
🚀 开始使用
- 首先给这个仓库点个星！⭐
- 输入以下命令进入CLI世界：
$ npx styled2tailwind --help
🤔 工作原理
我们的机制分为四个不同的步骤：
- 原始输入：我们从原始React组件开始（确保它包含一些styled components）。
- JavaScript AST：使用Babel将组件转换为JavaScript AST。
- 从AST到CSS：从AST中提取所有TemplateLiterals数据并将其转换为CSS。
- Tailwind转换：最后一步是将这个CSS转换为TailwindCSS格式。
flowchart LR
RSI(原始Styled输入) --> JSAST(JavaScript AST)
JSAST --> RCSS(原始CSS)
RCSS --> TW(Tailwind CSS)
📋 命令概览
| 命令 | 描述 |
|---|---|
styled2tailwind --help | 显示帮助命令。 |
styled2tailwind "src/*.jsx" | 解析src目录下的所有.jsx文件（支持正则表达式）。 |
styled2tailwind "src/*.jsx" --no-replace | 不替换styled components，而是将tailwind输出附加到文件末尾。 |
styled2tailwind "src/*.jsx" --no-conflicts | 强制在标记中用tailwind替换styled components，不使用git冲突。 |
⚠️ 限制
该项目仍处于早期测试阶段，我们已经发现了一些限制，并将在不久的将来发布修复！
- 多行组件：当一个组件被包裹在多行中时，CLI可能会表现异常。
- 动态React属性：处理动态React属性（尤其是函数）仍然具有挑战性。
🤝 贡献
我们随时欢迎贡献！要贡献，请遵循以下步骤：
- Fork这个仓库。
- 创建一个具有描述性名称的新分支。
- 进行更改，并使用Conventional Commits格式提交它们。
- 将更改推送到fork的仓库。
- 创建一个拉取请求，我们将审查您的更改。
📡 社区
如果你正在寻求帮助或只是想分享你对项目的想法，我们鼓励你加入我们的Discord社区。这是链接：https://blazity.com/discord。这是一个我们交流想法和互相帮助的空间。我们欢迎每个人的意见，期待欢迎你的加入。
📜 许可证
该项目采用MIT许可证。有关更多信息，请参阅LICENSE文件。
