Rust Yew Tailwindcss

zhangningboo

利用rust构建web业务系统

rust entrance

$ cargo new yew-tailwind
$ cd yew-tailwind
$ trunk serve

tailwind

初始化

$ npm install -D tailwindcss
$ npx tailwindcss init

styles/input.css

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

生成tailwind css文件

$ npx tailwindcss -i ./styles/input.css -o ./styles/output.css

tailwindcss v4

doc：https://tailwindcss.com/docs/v4-beta

$ npm install tailwindcss@next @tailwindcss/cli@next

styles/input.css

@import "tailwindcss";

$ npx @tailwindcss/cli -i styles/input.css -o styles/tailwindcss_v4.css

以trunk语法引入css

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link data-trunk rel="css" href="/styles/output.css" />
    <title>Yew App</title>
  </head>
  <body>

  </body>
</html>

.rs引入css

main.rs

use yew::prelude::*;

#[function_component(HelloWorld)]
fn hello_world() -> Html {
    html!(
        <h1 class="text-base/7 font-semibold text-zinc-950 sm:text-sm/6 dark:text-white">
            {"Hello World"}
        </h1>
    )
}

fn main() {
    yew::start_app::<HelloWorld>();
}

基于tailwindcss的UI组件库：https://preline.co/docs/index.html

Top categories