yew with tailwind css

Question

I have tried to follow the steps described in https://dev.to/arctic_hen7/how-to-set-up-tailwind-css-with-yew-and-trunk-il9 to make use of Tailwind CSS in Yew, but it doesn't work.

My test project folder:

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>

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

But I don't see the red background color in "Test!". Can you help?

score 5 · Answer 1 · answered Mar 14 '22 at 08:22

Tailwind CSS version 3.0 doesn't generate the full CSS by default anymore. This is why my codes didn't work when I made use of Tailwind CLI.

Follow the installation described in: https://tailwindcss.com/docs/installation

And run it in the watch mode:

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

Alternative solution in the development mode: make use of Play CDN by adding the next script in the head tag of index.html:

<script src="https://cdn.tailwindcss.com"></script>

score 5 · Answer 2 · answered Nov 10 '22 at 07:35

I think by far the cleanest solution is to use a trunk hook to build the CSS using the tailwind CLI. Something like is described here: https://www.matsimitsu.com/blog/2022-01-04-taliwind-cli-with-yew-and-trunk/

I personally installed the tailwind cli via yarn with a package.json (or npm if you prefer), but it's the same idea.

One benefit of this is the biggest benefit of tailwind: only the classes you need are included in the generated file.

Additionally, the use of the trunk hook means it's recompiled whenever trunk re-builds, including during development, and there's no unnecessary css files elsewhere in the project, it just uses the generated one.

score 0 · Accepted Answer · answered Mar 06 '22 at 20:51

0

I had the same problem. did as it says here https://github.com/matiu2/tailwind-yew-builder . I took tailwind.css from the output directory and put it in the root of the project.

answered Mar 06 '22 at 20:51

Dinis_S

24
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 07 '22 at 03:43
Make use of Yew Tailwind builder indeed works. Thank you. – ItFlyingStart Mar 08 '22 at 09:14

Ziya Tang · Answer 4 · 2022-03-07T17:19:42.837

0

Add a tailwind.config.js in your project root with the following contents. Modified from Tailwind CSS doc.

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

edited Mar 07 '22 at 17:19

answered Mar 07 '22 at 17:08

Ziya Tang

91
3

I have tried your solution, but it still doesn't work. – ItFlyingStart Mar 08 '22 at 09:23

yew with tailwind css

4 Answers4