I have issues with tailwind using the axum workspace template

[mamaart]

I am trying to setup the axum workspace with tailwind. I already did it with the plain actix (no workspace) and it worked fine. However when doing it with axum workspace template the styling is removed and adding tailwind classes has no effect.

I added the style/tailwind.css file to workspace Cargo.toml and the /target/site/pkg/tailwind.css is generated.

in the app/src/lib.rs I am calling

if I have for instance a h1 tag with class="bg-black" it will just show small text without a background color.

If i remove the stylesheet it will show normal h1 large text.

So from that I think it is safe to say that the generated tailwind css file is working. But the class is not read from the html tags.

Maybe it is an issue in leptos implementation.

[gbj]

It would be useful to have some kind of reproduction or steps to reproduce, to understand whether you're setting it up correctly. What command are you running for Tailwind? Or are you using cargo-leptos Tailwind support? etc.

[mamaart]

I created a project with:

cargo leptos new --git https://github.com/Gentle/start-axum-workspace

in Cargo.toml

got an error related to wasm-bindgen version so changed the version to 0.2.87

deleted line with style-file

change line

name = "tailwind"

added line

tailwind-input-file = "style/tailwind.css"

deleted file style/main.scss

added file style/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

added file tailwind.config.js

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

changed file /app/src/lib.rs

use leptos::*;
use leptos_meta::*;
use leptos_router::*;

pub mod error_template;

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    view! {
        <Stylesheet id="leptos" href="/pkg/tailwind.css"/>
        <Title text="Tailwind"/>
        <Router>
            <main>
                <Routes>
                    <Route path="" view=HomePage/>
                </Routes>
            </main>
        </Router>
    }
}

#[component]
fn HomePage() -> impl IntoView {
    let (value, set_value) = create_signal(0);
    view! {
        <main>
            <div class="bg-gradient-to-tl from-blue-800 to-blue-500 text-white font-mono flex flex-col min-h-screen">
                <div class="flex flex-row-reverse flex-wrap m-auto">
                    <button on:click=move |_| set_value.update(|value| *value += 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
                        "+"
                    </button>
                    <button class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-800 border-blue-900 text-white">
                        {value}
                    </button>
                    <button on:click=move |_| set_value.update(|value| *value -= 1) class="rounded px-3 py-2 m-1 border-b-4 border-l-2 shadow-lg bg-blue-700 border-blue-800 text-white">
                        "-"
                    </button>
                </div>
            </div>
        </main>
    }
}

[dglsparsons]

In your tailwind.config.js, tailwind is looking for content under src:

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

But that starter template has no src directory.

[mamaart]

Thank you! that was my issue! :-) I just changed ./src/**/*.rs to ./app/src/**/*.rs

[dglsparsons]

This works fine for me (literally set it up yesterday), so I suspect it's a misconfiguration.

[mamaart]

I listed my steps to reproduce in my answer to @gbj above ^

#2028 (reply in thread)

Can you see what I am missing?