带顺风css的yew
我试着按照hen7/how-to-set-up-tailwind-css-with-yew-and-trunk-il9中描述的步骤来使用Yew中的尾风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>();
}
但我在“考试”中没有看到红色的背景色。你能帮上忙吗？
回答 4
Stack Overflow用户
发布于 2022-03-06 20:51:44
我也有同样的问题。照这里说的做了https://github.com/matiu2/tailwind-yew-builder。我从输出目录中获取tailwind.css并将其放在项目的根目录中。
Stack Overflow用户
发布于 2022-03-14 08:22:29
默认情况下，顺风CSS 3.0版本不再生成完整的CSS。这就是为什么当我使用尾风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>Stack Overflow用户
发布于 2022-11-10 07:35:55
到目前为止，我认为最干净的解决方案是使用一个主干钩子来使用顺风CLI构建CSS。如下所示：https://www.matsimitsu.com/blog/2022-01-04-taliwind-cli-with-yew-and-trunk/
我个人通过一个package.json (或npm，如果你喜欢)通过纱线安装顺风cli，但这是相同的想法。
其中一个好处是顺风带来的最大好处:生成的文件中只包含了您需要的类。
此外，主干钩子的使用意味着每当主干重新构建时(包括在开发期间)都会重新编译，而且在项目的其他地方没有不必要的css文件，它只是使用生成的css文件。
https://stackoverflow.com/questions/71349311
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号