vugu / vugu

Vugu: A modern UI library for Go+WebAssembly (experimental)
https://www.vugu.org
MIT License
4.8k stars 175 forks source link

TailwindCSS and Vugu #247

Open owenwaller opened 7 months ago

owenwaller commented 7 months ago

Hi,

As TailwindCSS was mentioned in #246.

I've not come across TailwindCSS before but it does look interesting. My project is currently using Bootstrap as the CSS framework. I am not suggesting we would change but I would be interesting to know what might be involved.

So can I just check that my understanding to how TailwindCSS would interact with Vugu is correct?

In principle it looks like you just install TailwindCSS locally and generate a static CSS file via the npx tool which you then include as a stylesheet in the head element of every page.(*) Or Pull the TailwindCSS from the Play CDN as an external script, again in the head element of every page.

Is it as simple as that?

So if anyone has used TailwindCSS and Vugu together how did you do it?

(*) In principle this looks easy, but it's not clear how what we would to create the TailwindCSS template files (see step 2 in the instructions) as Vugu typically doesn't have html files (or JS for that matter).

bradleypeabody commented 7 months ago

Some feedback on this:

The CDN script concept is essentially just for development, I believe because it results in a much larger client download. I'm also not sure how well it plays with the dynamic HTML that Vugu generates in the UI, it may or may not work as expected, would need testing.

Tailwind now has a standalone CLI tool (thank goodness): https://tailwindcss.com/blog/standalone-cli. That is almost certainly the best way to integrate with Vugu. It should be possible to tell it to scan .vugu files as if they were HTML files.

Probably the main work involved is to figure out a suggested build method for when to run the tailwind cli tool - via go generate, dynamically from a live-reload handler, or as part of a Makefile, or perhaps task from taskfile.dev - those are all options, I'm not sure which is best.

owenwaller commented 6 months ago

See: #150 which is related.

@bradleypeabody has a prototype go implementation at: https://github.com/gotailwindcss/tailwind