#trunk-rs & tailwind

27 messages · Page 1 of 1 (latest)

hot merlin
#

Trunk has built-in support for tailwind with no further requirements. I generated a tailwind.css in my project root using npx tailwind -o ./tailwind.css, created a configuration file for tailwind, linked the tailwind.css to trunk, added some tailwind classes to an element, and my Firefox browser sadly does not display any of the applied tailwind classes. Here's my code:

$PRJ/src/main.rs:

use yew::prelude::*;

fn main() {
    yew::Renderer::<App>::new().render();
}

#[function_component]
pub fn App() -> Html {
    html! {
        <div>
            <h2 class={"text-3xl font-bold underline"}>{"Hello, World!"}</h2>
        </div>
    }
}

$PRJ/tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{rs,html}",
    "./index.html"
],
  theme: {
    extend: {},
  },
  plugins: [],
}

$PRJ/index.html:

<!DOCTYPE html>
<html>
    <head>
        <!--Copy ./public dir into dist to be able to link relatively from the dist-dir-->
        <link data-trunk rel="copy-dir" href="./public/" />
        <link data-trunk rel="tailwind-css" href="./tailwind.css" />
        <meta charset="utf-8" />
        <title>Tauri + Yew App</title>

        <link data-trunk rel="css" href="/public/main.css" />
    </head>
    <body></body>
</html>

trunk serve-output:

2023-11-11T21:15:34.574032Z  INFO 📦 starting build
2023-11-11T21:15:34.575004Z  INFO spawning asset pipelines
2023-11-11T21:15:35.036450Z  INFO copying & hashing css path="public/main.css"
2023-11-11T21:15:35.036504Z  INFO copying directory path="public"
2023-11-11T21:15:35.036881Z  INFO building frontend
2023-11-11T21:15:35.036963Z  INFO finished copying directory path="public"
2023-11-11T21:15:35.037203Z  INFO finished copying & hashing css path="public/main.css"
   Compiling frontend v0.1.0 (/Users/star/Codespace/polyphony/client-web/crates/polyphony-wasm)
2023-11-11T21:15:35.383266Z  INFO using system installed binary app=tailwindcss version=3.3.5                                                                                                                                                           
2023-11-11T21:15:35.383471Z  INFO compiling tailwind css path="tailwind.css"

Rebuilding...

Done in 92ms.
2023-11-11T21:15:35.672986Z  INFO finished compiling tailwind css path="tailwind.css"
    Finished dev [unoptimized + debuginfo] target(s) in 1.07s
2023-11-11T21:15:36.147527Z  INFO fetching cargo artifacts
2023-11-11T21:15:36.260786Z  INFO processing WASM for frontend
2023-11-11T21:15:36.281116Z  INFO using system installed binary app=wasm-bindgen version=0.2.87
2023-11-11T21:15:36.281189Z  INFO calling wasm-bindgen for frontend
2023-11-11T21:15:36.383159Z  INFO copying generated wasm-bindgen artifacts
2023-11-11T21:15:36.387226Z  INFO applying new distribution
2023-11-11T21:15:36.388539Z  INFO ✅ success
2023-11-11T21:15:36.390534Z  INFO 📡 serving static assets at -> /
2023-11-11T21:15:36.390630Z  INFO 📡 server listening at http://127.0.0.1:8080

Browser view is attached as an image. What am I doing wrong?

grafik.png
civic edge
#

thing is

#

you created the tailwind.css as the output of all the classes

#

you need to make a blank css file then put the (@)tailwind stuff in it, then put it in to the head as the tailwind thingy so trunk generates the actual resulting css for you and the classes are applied

hot merlin
#

wait, so the tailwind.css file i generated is the compiled output of what was in my project, do i understand this correctly?

civic edge
#

yes

#

i assume it is empty

hot merlin
#

not quite empty, but it is certainly not the 4mb tailwind file i was expecting (it is 10kb)

#

Sorry for the newbie question, but what @tailwind things do i need to put in the css file i create?

civic edge
#

im interested what it actually contains lol

hot merlin
#

🎁

civic edge
hot merlin
#

Oh no, I am ^^'

civic edge
#

no need to worry

#

so tailwind has these "namespaces"

#

they contain different kinds of utilities

#

there is base, which moves user agent styling out of the picture and makes the actual styling predictable

#

there is components which is .. i dont remember what it is but people add it so you should too

#

there is utilities which actually contains the utilities like bg-* etc.

#

you add each like @tailwind base with the "namespace" name instead of base

hot merlin
#

Ahh, i see!

#

is the tailwind.config.js still needed then? I think so

civic edge
#

it is

#

it is separate so you could add plugins with js and configure the actual styling layers (or namespaces...) in css

hot merlin
#

ahhhhhhhhhhh

#

! :D