How can I setup tailwind css vscode extension with Dioxus?

Question

I'm currently using Dioxus (Rust) for frontend WASM.

I'm looking to set up Tailwind CSS IntelliSense (Tailwind is working through the CLI), but I can't seem to get it working.

// settings.json
 "tailwindCSS.experimental.classRegex": ["class:s*\"([^\"]*)"],
  "tailwindCSS.includeLanguages": {
    "rust": "html"
  }

Here's an example component:

use dioxus::{core::UiEvent, events::MouseData, prelude::*};
use std::cmp::{max, min};

#[derive(PartialEq, Props)]
pub struct NavbarProps<'a> {
    page_state: &'a UseState<i32>,
}

pub fn Navbar<'a>(cx: Scope<'a, NavbarProps<'a>>) -> Element<'a> {
    let go_next = move |_: UiEvent<MouseData>| cx.props.page_state.modify(|val| min(val + 1, 17));
    let go_prev = move |_: UiEvent<MouseData>| cx.props.page_state.modify(|val| max(val - 1, 1));

    cx.render(rsx! (
        div {
            button {
                class: "p-1 bg-red-300 ",
                onclick: go_prev,
                "<",
            }
            button {
                class: "p-1 bg-red-700",
                onclick: go_next,
                ">"
            }
        }
    ))
}

Any ideas?

Answer 1

This configuration worked for me with Dioxus:

"tailwindCSS.experimental.classRegex": [
   "class: \"(.*)\""
],
"tailwindCSS.includeLanguages": {
    "rust": "html"
},

Answer 2

the extension and formatter are not very accurate. for every kind of code format need to add special regex. for example this code format shape

class:"flex"

(only different is, the " after : has not any space)

need the regex like this for snippet work:

"class:\"(.*)\""

the different with above answer code is delete space between : and /