Tailwind CSS framework support

[kernelogic]

Hello, I want to use Tailwind CSS framework in my project, is there any guide to it?

[SoerenSilkjaer]

I am also interested in using Tailwind CSS with play.

[GWoodmansey]

It might be a good idea to generalize that! It would be useful to support Tailwind, Flowbite, and other tools like Vite (or some equivalent) and Svelte (or other equivalents). A very big ask.

I'm working on it, using Tailwind through Flowbite in a Svelte client compiled with Vite. I have tried a few experiments manually with Play (Scala) and they have worked but it is beyond my skill set to create a fully automated system that works with sbt. So I copy stuff from place to place and then compile my sbt project.

[mkurz]

Can you give more details what exactly are you doing, like which command you run and what you copy from which source to which target?

[GWoodmansey]

I'm still in the early experimental stage, and this is a side project, so it proceeds extremely slowly.

I'm using Svelte and Flowbite (Tailwinds) using Vite to compile my JavaScript, CSS and HTML. I get my front end into a state I like, then I compile with Vite's npm run build. The results get dumped in a directory called dist.

Now move the complied files to the appropriate places in the Play project, changing their names to play equivalents (ex index.html becomes index.scala.html). I have to alter some of js and css links in these files and have to add @()(implicit request: RequestHeader) at the top of the html.scala files. The complied js and css files go to the public folder in the play project.

I've only done this with a very simple single page application so far. I'm now working on my main project. It will be a few more weekends until I am able to move it over.

I have not attempted to work Play's template features yet. I'm really hoping that I can integrate them as they save me a great deal of headaches. I may have to replace them with JSON JavaScript calls which would be unpleasant. I do not now how Svelte will react to having Play template commands in my HTML. I suspect badly as Svelte barfs at so much as a unclosed tag. Svelte and Vite ensure that your HTML is W3C compliant.

Why do this?

Svelte has reduced my client side code by about 1/3 in size and it is a lot easier to work with then any other JavaScript technology stack (including Bootstrap and jQuery). Flowbite-Svelte has mostly masked my incompetence with CSS. And my site will no longer look like a Bootstrap variant. Why Scala - the software I'm writing is for structural engineering (math!) and parallel programming, through the functional paradigm, makes things easier once you get over the steep learning curve. And Play provides a better way to wrap it all up in a single package. Also I want to uses Play's router on the server side, rather then Svelte's on the client side.

If you are interested I'll keep you posted. If I get anywhere I may try to automate the process... but that will be a lot of work with sbt, which I only know a tiny bit about.

[hertg]

Stumbled on this discussion, had just posted another one here:
https://github.com/orgs/playframework/discussions/12835

I had the same problem recently, and found a solution that works for me. I posted a short guide on how to use TailwindCSS in Play on my blog: https://hertig.blog/posts/tailwindcss-in-play-framework-without-npm/