If you would like to simply use a template repository to get began sooner, I’ve ready one here.
Intro
If you happen to’re something like me, you usually end up experimenting with the most recent internet applied sciences. Sadly, lots of these up-and-coming frameworks aren’t appropriate with one another. My newest venture is a Jupyter Pocket book clone, written in Rust, that runs solely on the browser. Naturally, I seemed towards Yew to create the net utility.
Even utilizing Rust, although, I did not need to hand over my Atomic CSS courses. I am accustomed to utilizing Tailwind CSS with frameworks like Subsequent and Astro, however not too long ago I’ve changed it with UnoCSS. It has a preset for Tailwind, but it surely’s considerably sooner.
This information goals to supply step-by-step directions for integrating UnoCSS and Yew.
Organising a Yew Challenge
To begin off, we will create a brand new Yew venture: 
- I will not go into depth right here, however you should allow the wasm32-unknown-unknown compilation goal for WebAssembly to work.
- Trunk is a bundler for Yew. You’ll be able to set up it utilizing
cargo, however I opted for a prebuilt binary. I usedbrew, however there are a number of methods accessible. - Create a brand new cargo venture and add Yew as a dependency. You must allow the “csr” (quick for client-side rendering) function, as a result of we’re constructing an internet utility.
If you happen to did all the pieces accurately, you need to have a Cargo.toml with the next:
[dependencies]
yew = { model = "0.20.0", options = ["csr"] }
Be aware that your model quantity could also be totally different.
Now, we simply have so as to add just a few issues to get a purposeful Yew app. Begin by making a boilerplate index.html file within the root of your venture:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Appropriate" content material="IE=edge" />
<meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
<title>Doc</title>
</head>
<physique></physique>
</html>
After we run Yew, it is going to create static recordsdata for us in ./dist. We do not need to hold these beneath model management, so we will add /dist to our .gitignore.
Editor setup
This subsequent step is optionally available, however in case you’re utilizing VSCode, you would possibly discover it helpful to allow HTML Intellisense for Rust recordsdata. Create .vscode/settings.json within the venture root with the next content material:
{
"emmet.includeLanguages": {
"rust": "html"
}
}
Beginning the App
From there, you may populate major.rs with a dummy Yew app:
use yew::prelude::*;
#[function_component]
fn App() -> Html {
html! {
<p class="text-5xl">{ "Hi there World!" }</p>
}
}
fn major() {
yew::Renderer::<App>::new().render();
}
Attempt working your app now to see if all the pieces’s working accurately. You will want to make use of trunk serve.
Putting in UnoCSS
See that text-5xl class there? That does not do something but. The subsequent stage is to put in UnoCSS: 
- UnoCSS runs on JavaScript, so we’ll must create a Node venture. I want
pnpm, however you may also usenpmoryarn. - We will add two devDependencies:
@unocss/cliandconcurrently.
If you happen to did that accurately, you need to now have a package deal.json with the next:
"devDependencies": {
"@unocss/cli": "^0.48.4",
"concurrently": "^7.6.0"
}
Once more, your model numbers might range. Now is an efficient level to pop node_modules into your .gitignore.
That is additionally optionally available, however since I am utilizing pnpm, I will add a special little script to my package deal.json:
"scripts": {
...
"preinstall": "npx only-allow pnpm"
},
Tying it Collectively
Now that the setup is out of the best way, we will correctly combine UnoCSS with Yew. The rationale we used @unocss/cli was as a result of we’ll use the unocss command to scan our Rust recordsdata and generate the required courses. Then, all we’ve to do is hyperlink the generated CSS to Yew’s index.html.
Create a brand new script in your package deal.json:
"uno": "unocss src/**/*.rs index.html --out-file static/uno.css",
- We’re telling UnoCSS to go looking by way of
index.htmlin addition to each Rust file insrc. - It will spit out the generated CSS file (
uno.css) within thestaticlisting.
Linking uno.css
To hyperlink this file in our HTML, we will add the next line to the <head> of the index.html file in our venture root:
<hyperlink data-trunk rel="css" href="./static/uno.css" />
- This can be a particular
<hyperlink>.data-trunkis how we inform Trunk to process assets. - Trunk helps just a few varieties of belongings. The
rel="{sort}"we’re searching for right here iscss. - We’re setting the
hrefattribute to theuno.cssfile from earlier.
Including a CSS Reset
Whereas we’re at it, we must also implement one of many UnoCSS resets. You’ll be able to choose whichever one you need, however I am going with antfu.css, which is an extension of Tailwind CSS’s Preflight. You’ve a pair choices for linking them:
This is all we wanted so as to add to index.html:
<hyperlink
rel="stylesheet"
href="https://cdn.jsdelivr.web/npm/@unocss/reset@0.48.4/antfu.css"
/>
<hyperlink data-trunk rel="css" href="./static/uno.css" />
Lastly, let’s add /static/uno.css to our .gitignore. We’ll hold a .gitkeep file in there for now, since its solely file is being gitignored.
Operating UnoCSS with Trunk
Bear in mind once we put in concurrently as a devDependency? That is how we’ll run UnoCSS alongside Yew. Let’s first create a “dev” script:
"dev": "concurrently 'trunk serve' 'npm run uno -- --watch'",
Right here, we’re nonetheless utilizing trunk serve to begin our Yew app. We will run UnoCSS in watch mode in order that it robotically updates ./static/uno.css once you replace index.html or a Rust file in src. The additional set of dashes is important to cross the --watch argument.
Subsequent, we will create a “construct” script for manufacturing:
"construct": "concurrently 'trunk construct --release' 'npm run uno'",
Now, we want neither UnoCSS nor Trunk in watch mode, so we will regulate each instructions accordingly.
Testing our App
Now, the command to run our Yew app is pnpm run dev (you may modify this with npm or yarn in case you’re utilizing these). Let’s strive it:
- It labored! An
uno.cssfile was generated within thestaticlisting. - We will see that trunk efficiently processed the asset, too. If you happen to test
./dist/index.html, you may discover that it even up to date the import to the CSS file.
Attempt altering text-5xl to different UnoCSS courses. You will see the kinds get refreshed robotically.
The total supply code is accessible here.