logo标签列表

Yew与Tailwind CSS

rusttailwind-cssyewtrunk-rs
4
我尝试按照 https://dev.to/arctic_hen7/how-to-set-up-tailwind-css-with-yew-and-trunk-il9 中所描述的步骤在 Yew 中使用 Tailwind CSS，但是并没有成功。
我的测试项目文件夹如下所示： enter image description here Cargo.toml: 

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

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
yew = { version = "0.19" }

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link data-trunk href="./tailwind.css" rel="css" />
    </head>

    <body>
    </body>
</html>

main.rs中的代码:

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    html! {
        <>
            <h1>{ "Hello World" }</h1>
            <p class={ classes!("bg-red-500") }>{"Test!"}</p>
        </>
    }
}

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

但是我在“测试！”中看不到红色背景颜色。你能帮忙吗？

输入图像描述

4个回答
5
Tailwind CSS 3.0默认不再生成完整的CSS。这就是为什么当我使用Tailwind CLI时，我的代码没有起作用的原因。
请按照以下描述进行安装：https://tailwindcss.com/docs/installation并在watch模式下运行。
npx tailwindcss -i ./input.css -o ./output.css --watch

在开发模式下的另一种解决方案：通过在index.html的head标签中添加以下脚本来利用Play CDN。
<script src="https://cdn.tailwindcss.com"></script>
5
我认为目前最干净的解决方案是使用一个 trunk hook 来使用 tailwind CLI 构建 CSS。类似这里描述的方式：https://www.matsimitsu.com/blog/2022-01-04-taliwind-cli-with-yew-and-trunk/。
我个人使用 yarn 和 package.json（或者如果你喜欢，也可以使用 npm）来安装 tailwind cli，但是核心思想是一样的。
其中的一个好处就是 tailwind 的最大优点：只有你需要的 class 才会被包含在生成的文件中。
此外，使用 trunk hook 意味着每当 trunk 重新构建时都会重新编译，包括开发过程中，而且在项目中不会有不必要的 CSS 文件，它只使用生成的那个文件。
0
目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
确实可以利用 Yew Tailwind 构建器。谢谢。 - ItFlyingStart
0
在您的项目根目录下添加一个名为tailwind.config.js的文件，并将以下内容复制到其中。该内容修改自Tailwind CSS doc。
module.exports = {
    content: ["./src/**/*.{html,rs}"],
    theme: {
        extend: {},
    },
    plugins: [],
}
我已经尝试了你的解决方案，但它仍然不起作用。 - ItFlyingStart
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接