Experiment with Tailwind CSS

Installation is kind of dispiriting since it seems to assume prior knowledge that I don’t have, and/or it expects me to use one of more than a dozen frameworks that I mostly have never heard of. Or PostCSS, which I looked up and still don’t understand what its purpose is. It says to use the Tailwind CLI but doesn’t explain why. I don’t want to install even more JavaScript dependencies, but I guess I must.

Why isn’t it just some CSS that I import? I could have done that by importing from the Play CDN but I am warned: “The Play CDN is designed for development purposes only, and is not the best choice for production”.

My guess is that the Tailwind CLI scans your HTML and CSS and produces only the necessary CSS that’s necessary. Reduces file size, bandwidth, etc. Thing is, I don’t have any HTML since everything is generated either from Rust on the server or emitted by Elm apps in the page. Does tailwindcss grok Rust and Elm? Let’s assume it looks for symbols that look like class names that it recognises.

Anyway, since I embed my CSS into my server executable, I need to rebuild the server every time the CSS changes. I edit some Rust source, which causes a rebuild of the server, but then that causes Tailwind to generate new CSS, which causes another rebuild of the server. But I guess I can’t use Tailwind classes until it has found them in my source. Chicken and egg. Is this the price for optimised CSS?

Perhaps, for a new user, the docs could have instead started with the non-optimised way, e.g. by using the Play CDN, so that one can learn without needing to bear the integration pain first?

tailwindcss warns me:

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest

and so I run the command it suggests. Something happens. Next time I run tailwindcss I get the same message. Twenty minutes trying to fix this and following every bit of inexpert advice on the web (there’s no expert advice on this, just a lot of folks bumping into walls in the dark) leads nowhere. I resolve to ignore this warning.

I try to reproduce the toolbar on my website using flex but nothing happens. Ten minutes flailing. Then I think: maybe I need to add @tailwind layout to my CSS? Nothing hinted that I should do this, it was a pure guess, but it works.

At this point I realise that I’m left with another way to write CSS. I want a toolbar, which missing.css was previously giving me, but it seems I need to figure it out from scratch. I need to figure out the low-level CSS required to render a toolbar – and then write it as HTML classes. Is Tailwind just indirection? Could I use a local <style> block or even a style attribute instead? Perhaps then I only need to know CSS and I don’t need to install additional tooling and figure out how to integrate it into my project.