Install daisyUI for Yew

How to install Tailwind CSS and daisyUI in a Yew project

1. Install Rust, WebAssembly Target and Trunk

Install Rust according to the official Rust docs

Install WebAssembly target

Terminal

rustup target add wasm32-unknown-unknown

Install Trunk

Terminal

cargo install --locked trunk

2. Create a Yew project

Terminal

cargo new yew-app
cd yew-app

Add yew to your Cargo.toml dependencies

Cargo.toml

[package]
name = "yew-app"
version = "0.1.0"
edition = "2025"

[dependencies]
+ yew = { git = "https://github.com/yewstack/yew/", features = ["csr"] }

3. Update `src/main.rs` file

src/main.rs

use yew::prelude::*;

#[function_component]
fn App() -> Html {
    html! {
        <button class="btn">{ "Hello daisyUI" }</button>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

4. Create `index.html` file

Create an index.html file in the project root with the following content:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Yew App</title>
    <link rel="stylesheet" href="output.css" />
  </head>
  <body></body>
</html>

5. Add Tailwind CSS and daisyUI

Fast install

The command below,

Downloads latest version of Tailwind CSS Standalone executable file for your OS, from GitHub
Downloads latest version of daisyUI bundle file from GitHub
Creates input.css file with Tailwind CSS and daisyUI
Generates output.css file for the first time

Linux or MacOS: (see the install script)

Terminal

curl -sL daisyui.com/fast | bash

Windows: (see the install script)

PowerShell

powershell -c "irm daisyui.com/fast.ps1 | iex"

Manual install

Get Tailwind CSS executable

Follow Tailwind CSS guide and get the latest version of Tailwind CSS executable for your OS.

For example:

Terminal

# 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):

Terminal

chmod +x tailwindcss

Get daisyUI bundle JS file

Run this code to download latest version of daisyUI as a single js file and put it next to Tailwind's executable file.

Terminal

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

Add Tailwind CSS and daisyUI to your CSS file.
Address your HTML and other markup files in the source function.

input.css

@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 */
}

6. Add a hook to build `output.css` automatically

Create a Trunk.toml file in the project root with the following content:

Trunk.toml

[build]
target = "index.html"
dist = "dist"

[[hooks]]
stage = "build"
command = "sh"
command_arguments = ["-c", "./tailwindcss -i input.css -o $TRUNK_STAGING_DIR/output.css"]