How to install Tailwind CSS and daisyUI in a Yew project
Install Rust according to the official Rust docs
Install WebAssembly target
rustup target add wasm32-unknown-unknown
Install Trunk
cargo install --locked trunk
cargo new yew-app
cd yew-app
Add yew
to your Cargo.toml
dependencies
[package]
name = "yew-app"
version = "0.1.0"
edition = "2025"
[dependencies]
+ yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }
src/main.rs
fileuse yew::prelude::*;
#[function_component]
fn App() -> Html {
html! {
<button class="btn">{ "Hello daisyUI" }</button>
}
}
fn main() {
yew::Renderer::<App>::new().render();
}
index.html
fileCreate an index.html
file in the project root with the following content:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Yew App</title>
<link rel="stylesheet" href="output.css" />
</head>
<body></body>
</html>
The command below,
input.css
file with Tailwind CSS and daisyUIoutput.css
file for the first timeLinux or MacOS: (see the install script)
curl -sL daisyui.com/fast | bash
Windows: (see the install script)
powershell -c "irm daisyui.com/fast.ps1 | iex"
Follow Tailwind CSS guide and get the latest version of Tailwind CSS executable for your OS.
For example:
# Run the corresponding command for your OS
# Linux
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64-musl
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64-musl
# MacOS
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64
# Windows
curl -sLo tailwindcss.exe https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe
Make the file executable (For Linux and MacOS):
chmod +x tailwindcss
Run this code to download latest version of daisyUI as a single js file and put it next to Tailwind's executable file.
curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.mjs
curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.mjs
Add Tailwind CSS and daisyUI to your CSS file.
Address your HTML and other markup files in the source
function.
@import "tailwindcss";
@source not "./tailwindcss";
@source not "./daisyui{,*}.mjs";
@plugin "./daisyui.mjs";
/* Optional for custom themes – Docs: https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme */
@plugin "./daisyui-theme.mjs"{
/* custom theme here */
}
output.css
automaticallyCreate a Trunk.toml
file in the project root with the following content:
[build]
target = "index.html"
dist = "dist"
[[hooks]]
stage = "build"
command = "sh"
command_arguments = ["-c", "./tailwindcss -i input.css -o $TRUNK_STAGING_DIR/output.css"]
Run the following command to start a development server and open the app in your browser
trunk serve --open