panda css vscode plugin can convert tailwind classes into css({...})

[FlatMapIO]

Description

The panda css vscode plugin can convert tailwind classes into css({...}) with one click.

Problem Statement/Justification

There are massive amounts of UI styles built with tailwind in the front-end ecosystem. By implementing this in the extension, pandacss vscode can help panda take off quickly.

Proposed Solution or API

When the cursor is inside class="...tailwindcss", it provides a code action in vscode to convert it into class={css({ ...panda })}.

Alternatives

No response

Additional Information

No response

[astahmer]

I don't think this should be in the main VSCode extension tbh.

but yeah I can see the convenience of having this !
in the meantime, I made this that you can use either through a CLI (pnpm add tw2panda) or through the online playground
https://tw2panda-astahmer.vercel.app/

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