Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/astahmer/tw2panda
Easily migrate code from tailwind to Panda CSS
https://github.com/astahmer/tw2panda
cli extension migration panda tailwind vscode
Last synced: about 1 month ago
JSON representation
Easily migrate code from tailwind to Panda CSS
- Host: GitHub
- URL: https://github.com/astahmer/tw2panda
- Owner: astahmer
- Created: 2023-06-28T01:07:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-07T17:32:50.000Z (12 months ago)
- Last Synced: 2024-05-03T02:12:56.759Z (9 months ago)
- Topics: cli, extension, migration, panda, tailwind, vscode
- Language: TypeScript
- Homepage: https://tailwind-to-panda.vercel.app/
- Size: 473 KB
- Stars: 110
- Watchers: 3
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tw2panda
Easily migrate code from tailwind to Panda CSS
## Features
- `rewrite`, `extract` and `convert` CLI commands
- use your own custom [`panda.config`](https://panda-css.com/docs/references/config) and/or custom `tailwind.config`
file
- also rewrites [`class-variance-authority`](https://cva.style/docs) to panda's
[`cva`](https://panda-css.com/docs/concepts/recipes#atomic-recipe-or-cva) function
You can look at this file for an example of what it can do:
[example](./packages/tw2panda/tests/rewrite-tw-file-content-to-panda.test.ts)
## VSCode extension
Select the text you want to convert and run the `tw2panda: Rewrite tw to Panda CSS` command.
https://marketplace.visualstudio.com/items?itemName=astahmer.tw2panda-vscode
## Install & usage
```sh
pnpm add tw2panda
```
It exports a bunch of functions that can be used to build your own tooling on top of it. You can look at the
[CLI code](packages/tw2panda/src/cli.ts) or the
[tests](packages/tw2panda/tests/rewrite-tw-file-content-to-panda.test.ts) to see how it can be used.
## CLI
```sh
npx tw2panda -h
```
```sh
tw2panda/0.1.0
Usage:
$ tw2panda [options]
Commands:
rewrite Output the given file converted to panda, doesn't actually write to disk unless using -w
extract Extract each tailwind candidate and show its converted output, doesn't actually write to disk
convert Example: inline-flex disabled:pointer-events-none underline-offset-4
For more info, run any command with the `--help` flag:
$ tw2panda rewrite --help
$ tw2panda extract --help
$ tw2panda convert --help
Options:
-h, --help Display this message
-v, --version Display version number
```
### rewrite
```sh
Usage:
$ tw2panda rewrite
Options:
--tw, --tailwind Path to tailwind.config.js
-w, --write Write to disk instead of stdout
-s, --shorthands Use shorthands instead of longhand properties
-c, --config Path to panda config file
--cwd Current working directory (default: /Users/astahmer/dev/alex/tailwind-to-css-in-js/packages/tw2panda)
-h, --help Display this message
```
### extract
```sh
Usage:
$ tw2panda extract
Options:
--tw, --tailwind Path to tailwind.config.js
-s, --shorthands Use shorthands instead of longhand properties
-h, --help Display this message
```
### convert
```sh
Usage:
$ tw2panda convert
Options:
-s, --shorthands Use shorthands instead of longhand properties
-h, --help Display this message
```
## Alternatives
https://github.com/jherr/tw2panda-cli / you can see the live demo here
https://www.youtube.com/watch?v=fKSemrudovo&t=442s
## Contributing
- `pnpm i`
- `pnpm build`
- `pnpm test`
When you're done with your changes, please run `pnpm changeset` in the root of the repo and follow the instructions
described [here](https://github.com/changesets/changesets/blob/main/docs/intro-to-using-changesets.md).