TailwindCSS support?

[rkimoakbioinformatics]

Hi, I am looking for a way to use TailwindCSS with Dioxus. Below is what I have gathered.

• tailwindcss CLI: https://tailwindcss.com/blog/standalone-cli. Run tailwindcss -i index.css -o dist/index.css -w.

• tailwind.config.js at the project root:

module.exports = {                                                                         
    content: ["./src/**/*.rs"],                                                              
    plugins: [                                                                               
      require('@tailwindcss/forms'),                                                         
      require('@tailwindcss/typography'),                                                    
    ]
}

• index.css at the project root:

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

• src/main.rs

use dioxus::prelude::*;                                                                      
                                                                                             
static STYLES: &'static str =                                                                
    include_str!("../dist/index.css");                                                       

fn main() {
    // init debug tool for WebAssembly
    wasm_logger::init(wasm_logger::Config::default());
    console_error_panic_hook::set_once();

    dioxus_web::launch(app); root_component :                                                           
}

fn app(cx: Scope) -> Element {
    cx.render(rsx! (
        div {
            style {
                STYLES
            }
           div {
               class: "text-red-700",
               "Text"
           }
        }
    ))
}

The text stays black. dist/index.css does not have the class text-red-700. When I change the TailwindCSS class, tailwindcss watch is not triggered. I guess class: is not recognized by the watcher. It seems that regex for the class can be configured, but I didn't find where it can be done.

Any advice?

[rkimoakbioinformatics]

The following happened:

• Removed @tailwind utilities; from index.css and saved the file. Then, put it back and saved again. This triggered tailwindcss and text-red-700 was in dist/index.css.

• Changed text-red-700 to text-red-600 in main.rs and saved the file. I use dioxus serve. This added text-red-600 to dist/index.css, but text-red-700 is still there. The above changes in index.css triggered tree shaking.

So, it kind of works.

Is there a way to let dioxus serve to trigger tailwindcss CLI to rebuild dist/index.css so that extracting classes and tree shaking happen at once?

[weilbith]

Such a hook would be pretty nice. Like Trunk has it. Nothing important, but would be a neat little feature to have hooks.

[ealmloff]

There is now a tailwind example: https://github.com/DioxusLabs/dioxus/tree/master/examples/tailwind

[weilbith]

I do the following now: tailwindcss --input ./input.css --output ./public/tailwind.css --watch & dx serve
I put that into a little script. But I also have to do it similar way for building etc. So I was wondering if there could be a Dioxus 1st level support for something like hooks. So I can say each time it should run tailwindcss --input ./input.css --output ./public/tailwind.css (no watch), no matter if on dx serve or dx build. Like when I would build it with trunk and its hooks.

[ealmloff]

That is something DioxusLabs/cli#124 would solve. I think there is already a tailwind plugin written, it just needs to be incorporated with the recent CLI changes (and moved to the main dioxus repo)

[weilbith]

Subscribed. Thank you! 🙏