Improve how multiple classes are built-up

[davestewart]

The "shift-click to copy multiple classes" is useful, but what I would love would be an area somewhere on the page to build up classes and see a preview.

Something along the lines of:

Type:
  (o) Element
  ( ) Container

Classes:
  [x] p-8
  [x] bg-slate-700     <- click to scroll back to the section
  [x] text-white


Preview:
  ....................................
  .              Sample              .
  ....................................


  [ Copy ] [ Reset ]

It would order the final classes by type, and use Tailwind Merge to skip duplicates.

Keep up the great work!

[davestewart]

Hey @rogden,

Looking to work on this today.

Are there any docs for how to test locally, such as a playground, demo script, npm-link or such like?

The serve script runs but the config.json does not load; instead the fetch seems to be rerouted to the index.html file and results in a JSON.parse() error in <Canvas>.

[rogden]

Hey. What version of Node are you running? I know it works on 16.x for me. Run nom run serve then open up http://localhost:8080 which will run the Vue app. Let me know if that works for you.

[davestewart]

I'll try 16, but did you know It's well into EOL now? Are there any reasons not to upgrade?

https://endoflife.date/nodejs

[davestewart]

FWIW, this is it on my machine:

A bit of digging; strangely, it runs fine from the terminal, but was unhappy in Webstorm's terminal, unless I ran it via the debugger.

Anyway, looks like it's running now, so I can at least have a dig!

A nice todo would be replacing the old Vue CLI setup with a Vue 3 / Vite setup. It's way-quicker for development.