顺风紫杉 css

Question

我已尝试按照 https://dev.to/arctic_hen7/how-to-set-up-tailwind-css-with-yew-and-trunk-il9 中描述的步骤在 Yew 中使用 Tailwind CSS，但它不起作用。

我的测试项目文件夹：

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>();
}

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

Answer 1

我遇到了同样的问题。按照这里所说的去做 https://github.com/matiu2/tailwind-yew-builder 。我从输出目录中取出 tailwind.css 并将其放在项目的根目录中。

Answer 2

在您的项目根目录中添加一个 tailwind.config.js，内容如下。修改自 Tailwind CSS doc.

module.exports = {
    content: ["./src/**/*.{html,rs}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

Answer 3

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>

顺风紫杉 css

yew with tailwind css

tailwind-css

yew