Tailwind CLI instead of CDN for server templates

[Sillyvan]

First up i hope im not opening too many discussions here!

I saw that the server templates add the CDN link for tailwind by default. I love tailwind! BUT i think we could do better.
The CDN ships a huge 150kb CSS file for tailwind. In the frontend world they use things like PostCSS to only ship the css classes that are used inside the project.

Now i was thinking instead of adding the CDN version by default we could ask if the user wants tailwind (this only applies if the user wants server templates. if they use a own js frontend it should be done there). From what i see this is still possible with the Tailwind CLI. Im aware that this would probably require the user to install the CLI by themselves (Just like Redis i guess) but it would heavly cut down the CSS shipped. A medium sized app i worked on ships a CSS file which is 12Kb. which is more than 10x less than the entire CDN version.

Would love to hear some opinions on this!

[Sillyvan]

I made a small POC for this and its super simple. let me explain

Step 1 (hardest part for to put into the generation): Get the tailwind binary for your system: https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.14

Step 2:
Create assets/static/base.css with

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 3:
Create a tailwind.config.js inside the root folder.

module.exports = {
  content: ["./assets/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
  ],
}

Step 4:
Remove: <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
Add: <link href="/static/output.css" rel="stylesheet">

Step 5:
Run ./tailwindcss -i ./assets/static/base.css -o ./assets/static/output.css --watch

Prod:
Just run ./tailwindcss -i ./assets/static/base.css -o ./assets/static/output.css --minify

Result:
Saas template css file goes from 150kb to 24kb
Allows a bit more configuration with the tailwind config.

Maybe together with #786 its even simpler in the dev enviroment

Please let me know if this is something that would be accepted as a PR, in which case i would start working on it.

[jondot]

yes!
we actually want to use the tailwind binary in the docs (instead of having to use node and npm)

[Sillyvan]

@jondot Well now im at a point where i wonder between 2 options.
Should we fetch the latest binary from git or should we have them in the repo and just clone them into the template?
And in what step would you put that?

Matching by OS and ARCH isnt the issue.

[joshka]

Binaries stored in a git repo is a bad idea - it tends to bloat repos and is meaningless when you have devs that use different OSes.
What might be a better idea is do the reverse of what a lot of npm packages do. There's a practice of wrapping crates in npm packages. Here it might be worth wrapping the tailwind cli in a crate and then just adding that dependency to the generated project. This way you get the ability to make it easy for users to update just by doing standard Rust things.

On the flipside, I think it's generally reasonable to require npm to manage web related packages rather than trying to work out good ways to build them into the app. You might consider just using mise to manage the expected node version so that this is easy-ish to keep synced, and call the right npm / pnpm commands (install / build) from a build.rs script.

[Sillyvan]

I agree that storing binaries is silly. Same goes for wrapping it tho i dont think thats worth it at all either. Especially when tailwind v4 comes which is fully written in rust we might have better options at that point.

Im not a against node here but i personally think it would be really annoying to require node just to build a css file in case of server assets. In a project with a standalone frontend this is a non issue.