search

rogden / tailwind-config-viewer

A local UI tool for visualizing your Tailwind CSS configuration file.
2.01k stars 111 forks source link

Improve how multiple classes are built-up #97

Open davestewart opened 5 months ago

davestewart commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

FWIW, this is it on my machine:

CleanShot 2024-05-06 at 10 42 43

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.