How to set up Tailwind CSS with Yew and Trunk

Note that this tutorial assumes you have a basic app already set up with Yew and Trunk. If not, check out Yew's official guide to building a starter app here.

Installing Things

We'll use the Tailwind CLI to set things up, which we'll install as a global npm or yarn dependency.

If you are religiously against installing such JavaScript evils on your sacred system, try tailwind-yew-builder, it does very similar things in Docker so you don't have to pollute your computer!

You can install the Tailwind CLI like so:

npm i -g tailwindcss

yarn global add tailwindcss

Now run a sanity check:

tailwindcss --help

You should see the help page for the Tailwind CLI! If not, make sure you've set up your PATH properly for global installs by either NPM or Yarn (particularly Yarn...).

Setting up Tailwind

What we're aiming to get is a single CSS file that we can include in our Trunk HTML. We can do this by running this in the same directory as our top-level index.html for Trunk:

tailwindcss -o ./tailwind.css

That will generate a file named tailwind.css that contains around 4MB of pure CSS. We'll come back to cutting that down. For now though, you should make sure that doesn't get added to version control by adding it your .gitignore like so:

tailwind.css

Now it's time to include that file in our index.html, which we can do by adding this to the head:

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

This directs Trunk to use the Tailwind file as a stylesheet. You can now use styles in your Yew html!, try it out like this:

html! {
    <p class=classes!("bg-red-100")>{"Test!"}</p>
}

Now is you run trunk serve, you should see a paragraph saying Test with a very light red background! Congratulations, you've set up Tailwind with Yew in development!

Going to production

This is all well and good, but we do NOT want to be serving 4MB of assets to our users! Tailwind has an inbuilt feature for purging unused CSS classes, which it does by searching for the classes you've used. It does that using a regular expression, which just analyses the file, meaning Rust is fine!

Create a tailwind.config.js file at the root of your project and add this to it:

module.exports = {
    purge: {
        mode: "all",
        content: [
            "./src/**/*.rs",
            "./index.html",
            "./src/**/*.html",
            "./src/**/*.css",
        ],
    },
    theme: {},
    variants: {},
    plugins: [],
};

You can add any other Tailwind configuration you might have in here as well. All this does though is instruct Tailwind to look at all Rust, HTML, and CSS files in src/ and remove any classes it doesn't find being used there. We also check index.html in case you have anything in there. This check could probably be refined using the extract property so it only checks Rust files in html!, but this is good enough for now.

Now try building Tailwind for production by running this:

NODE_ENV=production tailwindcss -c ./tailwind.config.js -o ./tailwind.css --minify

That will automatically enable purging, and now check the size of the tailwind.css file. It should be something like 3KB! That's a pretty giant improvement!

Bonus: command aliases

These commands are pretty long and tedious to execute regularly, so you might want to use something like Bonnie to alias them to shorter commands like build and run. Check out the Bonnie wiki for an explanation of how this example file works (should be pretty self-explanatory though):

version="0.3.1"

[scripts]
## Builds Tailwind CSS for development (no purging)
build-tailwind-dev = [
    "cd frontend",
    "tailwindcss -c ./tailwind.config.js -o ./tailwind.css"
]
## Builds Tailwind CSS for production (maximum purging and minification)
build-tailwind-prod = [
    "cd frontend",
    "NODE_ENV=production tailwindcss -c ./tailwind.config.js -o ./tailwind.css --minify"
]
## Builds Tailwind CSS for development usage
setup.subcommands.tailwind = "bonnie build-tailwind-dev"
setup.subcommands.prompt-tailwind = "echo \"Have you installed the Tailwind CLI globally with 'npm i -g tailwindcss' or 'yarn global add tailwindcss'?\""
setup.order = """
tailwind {
    Failure => prompt-tailwind
}
"""

## Builds everything
build.cmd = "cargo build"
## Builds the frontend
build.subcommands.frontend = [
    "cd frontend",
    "bonnie build-tailwind-prod",
    "cargo build"
]
## Runs the frontend, watching for changes (uses Trunk)
## Tailwind is assumed to be set up after `setup`
run.subcommands.frontend = [
    "cd frontend",
    "trunk serve"
]

Then anyone starting out with your project can just run bonnie setup to build Tailwind for them! Running bonnie run frontend will spin up a Trunk server for you automatically, and bonnie build frontend will build everything for production (including Tailwind)! Note that this configuration assumes you've got everything in frontend/ in case you've got a backend/ as well (if not you can just remove those bits).

Full disclosure: I am the maintainer of Bonnie.

Closing words

Hopefully, you now have a working setup with TailwindCSS and Yew! As always, any feedback would be greatly appreciated!

Happy coding!

145