styled2tailwind

<div align="center"> <h1>Styled2Tailwind 🌀</h1> <p>使用这个便捷的代码转换工具，将你的Styled-Components转换为TailwindCSS。</p> <br />

ezgif com-video-to-gif

</div> <div align="center"> <a href="https://www.npmjs.com/package/styled2tailwind"><img alt="npm版本徽章" src="https://img.shields.io/npm/v/styled2tailwind"></a> <img alt="npm包大小" src="https://img.shields.io/bundlephobia/min/styled2tailwind"> <img alt="许可证徽章" src="https://img.shields.io/npm/l/styled2tailwind"> <img alt="GitHub工作流状态（带事件）" src="https://img.shields.io/github/actions/workflow/status/blazity/styled2tailwind/build-and-test-runner"> </div>

🌟 动机

随着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冲突。