tw2panda

Easily migrate code from tailwind to Panda CSS

Screenshot 2023-08-08 at 01 34 49

Features

rewrite, extract and convert CLI commands
use your own custom panda.config and/or custom tailwind.config file
also rewrites class-variance-authority to panda's cva function

You can look at this file for an example of what it can do: example

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

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 or the tests to see how it can be used.

CLI

npx tw2panda -h

tw2panda/0.1.0

Usage:
  $ tw2panda <command> [options]

Commands:
  rewrite <file>       Output the given file converted to panda, doesn't actually write to disk unless using -w
  extract <file>       Extract each tailwind candidate and show its converted output, doesn't actually write to disk
  convert <classList>  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

Usage:
  $ tw2panda rewrite <file>

Options:
  --tw, --tailwind <file>  Path to tailwind.config.js
  -w, --write              Write to disk instead of stdout
  -s, --shorthands         Use shorthands instead of longhand properties
  -c, --config <path>      Path to panda config file
  --cwd <cwd>              Current working directory (default: /Users/astahmer/dev/alex/tailwind-to-css-in-js/packages/tw2panda)
  -h, --help               Display this message

extract

Usage:
  $ tw2panda extract <file>

Options:
  --tw, --tailwind <file>  Path to tailwind.config.js
  -s, --shorthands         Use shorthands instead of longhand properties
  -h, --help               Display this message

convert

Usage:
  $ tw2panda convert <classList>

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.

tw2panda 🐼

astahmer