Adding Some Style

You may have guessed by now if you looked at the layout we created that we're going to use Tailwind for styling.

We'll add this to our web-assets folder and then to our layout. We have pre-installed tailwind-extra so we can use tailwind without creating an npm pipeline.

Adding Tailwind

cd crates/web-assets
tailwind-extra init

This will create a tailwind.config.js file.

We also need to create a input.css file.

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

Watching Tailwind

Add the following to your ´Justfile´

tailwind:
    cd /workspace/crates/web-assets && tailwind-extra -i ./input.css -o ./dist/tailwind.css --watch

Also create a .gitignore so that we don't include the dist folder in our repo.

dist

Now we can run

just tailwind

The stylesheet will be compiled.

Add the stylesheet to the layout

Update crates/web-assets/build.rs and add the dist folder to our static files.

let asset_dirs = vec![PathBuf::from("./images"), PathBuf::from("./dist")];

Update crates/web-pages/src/layout.rs and change the stylesheets entry.

stylesheets: vec![web_assets::files::tailwind_css.name.to_string()],

With Tailwind

We're nearly there. Our app is now using tailwind.