leptos手工集成tailwindcss

最近在看leptos,之前使用过bulma作为css库,感觉样式太少,想结合tailwindcss.

leptos的官方仓库里有例子: tailwind_csr_trunk

但他作为最后结果,本文就介绍下各个部分和是怎么集合的.

主体其实就两个:

cargo + leptos + trunk

这一套作用是编译为wasm.
最小的初始化是新建rust工程,然后增加leptos依赖,写一个hello world之后用trunk运行.
命令如下:

1
2
3
cargo new leptos-test
cd leptos-test
cargo add leptos

在项目根目录放入一个最简单的html:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        
    </body>
</html>

main.rs中写入一个hello world:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
use leptos::{component, mount_to_body, prelude::*, view, IntoView, Scope};

fn main() {
    mount_to_body(|cx| {
        view! { cx, <App/> }
    })
}

#[component]
fn App(cx: Scope) -> impl IntoView {
    let (count, set_count) = create_signal(cx, 0);
    let double_count = move || count() * 2;

    view! { cx,
        <p>"hello world"</p>
    }
}

使用trunk serve运行即可(指定端口--port port)

至此这部分完成,这部分和tailwindcss独立.

npm + tailwindcss

这一套是生成css.
安装就是用tailwindcss官网的安装方式: 

1
2
npm install -D tailwindcss
npx tailwindcss init

在tailwind.config.js配置中加上对*.rs文件的扫描(让它扫描到view!宏的内容) 

1
2
3
4
5
6
7
module.exports = {
  content: ["./src/**/*.rs"],
  theme: {
    extend: {},
  },
  plugins: [],
}

input.css和官网一样, 放在项目根目录:

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

最后将css输出到一个位置即可(不要用dist 会和trunk的冲突):

1
npx tailwindcss -i ./input.css -o ./output.css --watch

可以将上面main.rs的p中增加一些class,例如text-3xl等.

至此,它会根据view!内的使用的class动态生成output.css
这个是因为leptos使用了JSX的语法,所以也能被tailwindcss正确处理.

至此在根目录生成了output.css

引入output.css

在index.html直接link会失败,因为这个index.html被trunk处理,无法直接link.
要参考trunk文档使用特殊的标签:

1
2
<link data-trunk href="output.css" rel="css" />
<link data-trunk rel="copy-dir" href="public" />

第一个是引入tailwindcss生成的css,第二个是其他的一些静态文件可以放在根目录的public文件夹中,会被复制进去.

至此就结束了,这个流程中trunk负责wasm和整体的构建,tailwindcss就是css的生成,是两个不同的workflow.