Tailwind styling not possible with tailwind_actix example

[FabianBruenger]

Hi guys,

I am making my first steps with leptos and tailwind. I was able to create a website with csr leptos and tailwind and now I wanted to move to the ssr leptos actix tailwind website creation.

I am following the steps for the tailwind_actix example. The project compiles, but somehow the styling is not applied, see screenshot.

But it should look like this:

https://tailwindcomponents.com/component/blue-buttons-example

I am a bit stucked here because the out of the box example is not really working.

If someone had the same issue, some help would be really appreciated.

Thanks in advance.
Cheers

[gbj]

Hm...

I just tried the following:

git clone https://github.com/leptos-rs/leptos
cd leptos/examples/tailwind_axum
cargo leptos watch

(application compiles — I go to http://localhost:3000/)

Application appears, styled correctly.

I change a few classes in the editor — reloads with correct, updated classes.

So, not sure what's happening with your setup here, unfortunately! Maybe more details would be helpful? Is the CSS file 404ing? Does it look like it's being generated correctly in the target/site directory? Which commands are you using? etc.

[gbj]

Does that look like it contains the classes you expect it to contain, based on what is in the example you're running? The CSS file that is generated when I run the example is 403 lines. It also doesn't start with a comment like the one you're showing. I know very little about Tailwind -- could this be a Tailwind CLI versioning issue? I think they just had an update recently.

[FabianBruenger]

I think you are on the right track. I will check the versioning and do some additional research. What is really off in my also little understanding, is that the positioning which is working is in the same line of tailwind styling and still doesnt work somehow. For example app.rsl. 31.

I will update here as soon as I got some news.

[FabianBruenger]

What is your tailwindcss version?

npm view tailwindcss version

[FabianBruenger]

Okey, I found the error:

In Tailwind CSS v4, the way you import and use Tailwind's utility classes has changed. The old @tailwind base;, @tailwind components;, and @tailwind utilities; directives are no longer used. Instead, you simply import Tailwind CSS with:
@import "tailwindcss"; in the tailwind.css

This change is part of the updates in Tailwind CSS v4, which aims to make the framework feel more CSS-native and easier to use.

[FabianBruenger]

Thanks a lot for the support @gbj ! That happens if an embedded engineer tries to do front end :D

[gbj]

Oh, great! Brrrrrg yeah wildly frustrating. I'm glad you figured it out -- I would not have known that.