如何将 Tailwind CSS 与 Yew 一起使用？
Tan*_*and 4 rust tailwind-css yew trunk-rs
我尝试按照https://dev.to/arctic_hen7/how-to-set-up-tailwind-css-with-yew-and-trunk-il9中描述的步骤在 Yew 中使用 Tailwind CSS，但是它不起作用。
我的测试项目文件夹：
货物.toml：
[package]
name = "yew-tailwind-app"
version = "0.1.0"
edition = "2021"
[dependencies]
yew = { version = "0.19" }
索引.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>();
}
但我在“测试！”中没有看到红色背景颜色。你能帮我吗？
Tailwind CSS 3.0 版本默认不再生成完整的 CSS。这就是为什么当我使用 Tailwind CLI 时我的代码不起作用。
按照以下描述的安装进行操作：https://tailwindcss.com/docs/installation
并在监视模式下运行它：
npx tailwindcss -i ./input.css -o ./output.css --watch
开发模式下的替代解决方案：通过在index.html的head标签中添加下一个脚本来利用Play CDN：
<script src="https://cdn.tailwindcss.com"></script>
我认为迄今为止最干净的解决方案是使用 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 的最大好处：生成的文件中仅包含您需要的类。
此外，使用 trunk hook 意味着每当 trunk 重新构建时（包括在开发期间），它都会重新编译，并且项目其他地方没有不必要的 css 文件，它只是使用生成的文件。
| 归档时间： |
|
| 查看次数： |
4433 次 |
| 最近记录： |