Tailwind Support for CLI

[itsezc]

Specific Demand

For DX purposes, it'd be great if we can have Tailwind to auto-generate CSS files through the CLI similar to how trunk approaches this:

Implement Suggestion

N/A

[Exotik850]

I think it might be better to have commands that are run whenever dx serve is run to be set in Dioxus.toml similar to how tauri uses npm run dev which launches both the backend and the frontend with separate commands, just to make the config more flexible to on-file-change systems like tailwindcss --watch

Could also be a good solution to 1458

[ealmloff]

I think it might be better to have commands that are run whenever dx serve is run to be set in Dioxus.toml similar to how tauri uses npm run dev which launches both the backend and the frontend with separate commands, just to make the config more flexible to on-file-change systems like tailwindcss --watch

+1 I don't think the configuration should live in the html file. A plugin system would allow us to build different composable pieces that hook into different parts of the build process. Tailwind integration could be a plugin

[itsezc]

Some additional context to keep in mind is Tailwind CLI will be moving to Oxide (https://github.com/tailwindlabs/tailwindcss/tree/master/oxide) in a few minor versions (3.5 - 3.7) which isn't far away. I would also love it if we didn't have a "tailwind.css" in our public folder that we had to commit, I'm aware we can just ignore it with .gitignore but while running with dx serve I'd like to not have generated there if possible (nice to have).

[ealmloff]

I would also love it if we didn't have a "tailwind.css" in our public folder that we had to commit, I'm aware we can just ignore it with .gitignore but while running with dx serve I'd like to not have generated there if possible (nice to have).

You don't need to have it in your public folder, but the dist folder should have everything required for the application to run, including the CSS files

[peanutbother]

For my current project I am using a build.rs script where I run tailwindcss if a source file changes:

use std::process::Command;

fn main() {
    Command::new("tailwindcss")
        .args(&["-i", "./src/tailwind.css", "-o", "./assets/tailwind.css"])
        .status()
        .unwrap();
}

I include the built file with manganis in a designated assets.rs like so:

// include tailwind css asset
pub const _TAILWINDCSS: &str = manganis::mg!(file("./assets/tailwind.css"));

This automatically includes the built css into my project, so everything dx serve does works out of the box.

There might be a way to integrate this assets.rs file into my build script but for now I'm happy enough with my solution.

[itsezc]

I believe this issue is blocked upstream for Tailwind v4, where they don't yet have a standalone CLI. Only Tailwind v3 is compatible right now, unfortunately.