PSA: Rust web frontend with Tailwind is easy!

I started my hobby project web app with Axum on the backend and React on the frontend, mostly because I wanted to use TailwindCSS and I assumed that it was incompatible with Rust frontends.

Turns out I was totally wrong! And this is just a PSA for anyone who might've thought the same.

Trunk, the Rust-equivalent of Webpack & Vite, comes with tailwind built-in. You heard that right! You don't even need to install the tailwind CLI via npm or something like that. No more package.json! <3

Here's a quick overview of how to setup tailwind. This is not intended as a reference, but an impression of how easy it is.

Firstly, you need the two files tailwind.config.js and tailwind.css, which are also required in JavaScript-land.

Next, you need to add a reference to the style sheet in the index.html:

<link data-trunk rel="tailwind-css" href="/tailwind.css" />

Note the special rel="tailwind-css. It tells trunk to run the tailwind CLI for you. Make sure the href points to the correct path of your tailwind.css file.

That's it! This worked for me with yew and leptos. Leptos has some additional tips about setting up vscode, e.g. for getting autocomplete for tailwind classes in your rust files.

It's a lovely experience and I'm now in the process of migrating my react app to leptos. I've never been more optimistic about Rust going everywhere!