Hot reload doesn't work with tailwindcss v4.0.0-beta.4

[RustGrow]

Hot reload doesn't work with tailwindcss v4.0.0-beta.4

https://tailwindcss.com/docs/v4-beta#installing-the-cli $ npm install tailwindcss@next @tailwindcss/cli@next

delete from input.css

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

and add inside @import "tailwindcss"; run with command

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

Dioxus version: 0.6.0-rc.0 Rust version: 1.83 OS info: Windows 11 App platform: web

[jkelleyrtp]

Tailwind changed how they do content sources - all configuration is done in the css file now.

You can add this line to your input tailwind.css file to recover that:

@source "./src/**/*.{rs,html,css}";

IE my tailwind.css file looks like this:

@import "tailwindcss";
@source "./src/**/*.{rs,html,css}";

https://tailwindcss.com/docs/v4-beta#configuring-source-detection

do you mind adding a note to the dioxus docsite about this?

[RustGrow]

Maybe I'm doing something really wrong. I would be very grateful if you could look at my settings. I am not able to run hotreload with the new version of dioxus from git 12/5 and 4 beta Tailwind Css. My repo

$ dx --version
dioxus 0.6.0-rc.0 (f3b6ec5)

main.rs

const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/main.css");
const HEADER_SVG: Asset = asset!("/assets/header.svg");
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");

tailwind.config.js

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

input.css

@import "tailwindcss";
@source "./src/**/*.{rs,html,css}";

dx serve npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch

https://github.com/user-attachments/assets/9c63a74d-9be2-42b8-ba08-d3ddb389cc35

[jkelleyrtp]

Oh, I didn't realize that tailwind is in the default gitignore

# Generated by Cargo
# will have compiled files and executables
/target/
/dist/
/static/
/.dioxus/

# this file will generate by tailwind:
/assets/tailwind.css #  <-------------------------  dx ignores updates to gitignored files

# These are backup files generated by rustfmt
**/*.rs.bk

The new watcher ignores files specified the gitignore, so tailwind isn't being updated live.

I'm not sure what the right approach should be - maybe we exempt the "assets" directory from the ignore list completely?

The short term solution be to remove tailwind from the gitignore, but the long term is to probably process all updates from the assets folder.

[RustGrow]

I removed tailwind from the gitignore, but unfortunately hotreload didn't work. .gitignore

# Generated by Cargo
# will have compiled files and executables
/target/
/dist/
/static/
/.dioxus/

# These are backup files generated by rustfmt
**/*.rs.bk

[jkelleyrtp]

I removed tailwind from the gitignore, but unfortunately hotreload didn't work. .gitignore

# Generated by Cargo
# will have compiled files and executables
/target/
/dist/
/static/
/.dioxus/

# These are backup files generated by rustfmt
**/*.rs.bk

Make sure you restart dx serve - we don't hotreload changes to the gitignore.

[nazo6]

I found that watcher only uses .gitignore in crate root and workspace root, so as a workaround, by placing .gitignore in assets folder, you can ignore generated tailwind css file.

[oparkshinels]

Hot reload now works with tailwind css with the last commit. I tested with tailwind css 3 and 4.alpha and everything works fine. 👏

dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "94a499c", features = ["router"] } 

[jkelleyrtp]

I put out a new dioxus-cli binstall for 0.6.0 - I don't think you need to update dioxus itself to get the fixes, just the cli.

[jkelleyrtp]

We updated the dioxus template and the currently released version should be more intelligent. We still have plans to tweak how we handle hot-reloads for generated files + gitignores.