Support for the Tailwind v4

[RustGrow]

Version 4 of tailwind css will replace version 3 sooner or later.

1. Right now using version 4 completely breaks manganis.
2. When cargo check finishes the tailwind 4 server terminates.
3. It is impossible to use Tailwind CDN because it does not exist.

Steps to reproduce the behavior:
Using the CLI

npm install tailwindcss@next @tailwindcss/cli@next
Next, import Tailwind in your input.css file:
@import "tailwindcss";

npx @tailwindcss/cli@next -i ./input.css -o ./assets/tailwind.css --watch

repo

bandicam.2024-09-29.17-00-22-532.mp4

Dioxus version: 0.6.0-alpha.2
Rust version: rustc 1.81.0
OS info: Win11
App platform: web

[mfurseman]

Now v4 is the default for new installations!

[rrrrigel]

tailwind v4 seems to be working, but not fully, testing some classes like setting text size and font styles are not working for me, I'm not sure why.

[tsager25]

tailwind v4 seems to be working, but not fully, testing some classes like setting text size and font styles are not working for me, I'm not sure why.

Not sure if you have the same problem as me but i got my setup working by changing

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

to

@import "tailwindcss";

in my input.css

and running

npx @tailwindcss/cli [...]

instead of

npx tailwindcss [...]

It is documented this way on the tailwind v4 doc for the cli version

[sverro2]

Thanks @tsager25! This helped me!

[tsr8]

It was very confusing to init a new application with tailwind and it not working. Thanks for workaround.

[zhuwei]

tailwind v4 seems to be working, but not fully, testing some classes like setting text size and font styles are not working for me, I'm not sure why.

Not sure if you have the same problem as me but i got my setup working by changing

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

to

@import "tailwindcss";

in my input.css

and running

npx @tailwindcss/cli [...]

instead of

npx tailwindcss [...]

It is documented this way on the tailwind v4 doc for the cli version

Although there is no error, the vast majority of classes in tailwindss do not work

[sverro2]

Can you give an example of classes that don't work?? For me so far I haven't encountered any. Or I am extremely lucky? Isn't it just a matter of the already existing CSS files (created in the dx new project) overriding the tailwind classes?

I do use Tailwind 4 atm, in combination with Dioxus

[Legorooj]

The steps that I used to get Tailwind v4.1.8 working with Dioxus v0.6.3 were:

1. npm install tailwindcss
2. Change your input.css to contain nothing other than @import "tailwindcss";
3. And the new watch command is as follows: npx @tailwindcss/cli -i ./input.css -o ./assets/tailwind.css --watch

[zhuwei]

@Legorooj VM13:3 Not allowed to load local resource: file:///F:/Temp/rust/test/src/assets/tailwind.css