Tailwindcss v0.4 support

[rafiyq]

Cargo leptos use --config option and provided config file to build tailwindcss. In v0.4 there is no need to use config file, anything can be configured in css. It would be useful if we can exclude config file when building tailwindcss.

[gbj]

Are you interested in making a PR?

[chidea]

I'd recommend using new version of tailwindcss binary using binary download feature of cargo-leptos.
I've confirmed that following steps are working correctly.
First, remove any old version of tailwindcss binary by npm uninstall tailwindcss -g tailwindcss
Set new version with environment variable LEPTOS_TAILWIND_VERSION='v4.0.0'.
Change content of style/tailwind.css to

@import "tailwindcss";
@config "../tailwind.config.js"

Retry whatever command you were using with cargo leptos ... and it will download and use new version of binary with --config flag which is going to be ignored anyway.

[LouneCode]

I am still get an error when compiling the Leptos application on Windows 11. I have made the recommended changes to the style/tailwind.css file and run the cargo leptos serve command as follows:

> $Env:LEPTOS_TAILWIND_VERSION="v4.0.0"; $Env:LEPTOS_WASM_OPT_VERSION="version_121" ;$Env:WASM_BIND_GEN="0.2.100"; cargo leptos serve

.
.
.
   Compiling glsensor-tracker v0.4.0 (C:\Users\XXX\Desktop\Developement\GL_Sensor_Gateway\Rust\glsensor-tracker-twcss-4.0.0)
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 8.42s
       Cargo finished cargo build --package=glsensor-tracker --lib --target-dir=C:\Users\XXX\Desktop\Developement\GL_Sensor_Gateway\Rust\glsensor-tracker-twcss-4.0.0\target\front --target=wasm32-unknown-unknown --no-default-features --features=hydrate
       Front generating JS/WASM with wasm-bindgen
    Finished generating JS/WASM for front in 1.0252701s
    Tailwind failed
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
Error: Failed to find 'tailwindcss'
  in [
    C:\Users\XXX\Desktop\Developement\GL_Sensor_Gateway\Rust\glsensor-tracker-twcss-4.0.0\style
  ]
    at C:\snapshot\tailwindcss\node_modules\postcss-import\lib\resolve-id.js:35:13
    at async LazyResult.runAsync (C:\snapshot\tailwindcss\node_modules\postcss\lib\lazy-result.js:396:11)
    at async build (C:\snapshot\tailwindcss\lib\cli\build\index.js:49:9)
.
.
.

...But if I manually download tailwindcss-windows-x64.exe, v4.0.0 from tailwindlabs
tailwindcss GitHub and copy tailwindcss-windows-x64.exe to C:\Users%USERNAME%\.tailwindcss folder. Then rename the file to tailwindcss.exe. After this trick, all the code compiles fine again in WIN11 environment.

TIP: Check that C:\Users%USERNAME%\.tailwindcss is in the PATH environment variable.

I removed manually installed tailwindcss and compile the Leptos code again. Now compiler downloads and installs tailwindcss-v4.0.0 as should be.

.
.
.
       Front generating JS/WASM with wasm-bindgen
    Finished generating JS/WASM for front in 2.3746487s
     Command installing tailwindcss-v4.0.0 ...
     Command tailwindcss-v4.0.0 installed.
    Tailwind finished tailwindcss --input style/tailwind.css --config tailwind.config.js --output C:\Users\XXX\Desktop\Developement\GL_Sensor_Gateway\Rust\glsensor-tracker\target\tmp\tailwind.css
warning: output filename collision.
.
.
.

So, the suggested fix works also in Windows 11 OK.

[Boscop]

I have tailwind-input-file = "style/tailwind.css" in my Cargo.toml, and this in my package.json:

{
  "devDependencies": {
    "@tailwindcss/cli": "^4.0.0",
    "tailwindcss": "^4.0.0"
  }
}

In my Dockerfile, it was previously enough to do RUN npm ci.
Now with ENV LEPTOS_TAILWIND_VERSION=v4.0.0 I had to add this to make the build work (in alpine):
RUN npm install @parcel/watcher @tailwindcss/oxide-linux-x64-musl lightningcss-linux-x64-musl

Shouldn't cargo-leptos install packages that are necessary for tailwind to work?

[LouneCode]

Yes, you are right, cargo-leptos installs the tailwindcss binary if it is not present on the system. In my case, I already had an old version of tailwindcss installed. At first I didn't notice it, but when I removed the old tailwindcss version and recompiled the application, everything went by the book. Cargo-leptos does the job correctly.

In that Alpine case, you had to install manually taillwindcss. I have done same observation, that cargo-leptos may install wrong binary version of the tailwindcss in the Alpine Docker container. Please see the issue #426.