rustdioxus

How can I setup tailwind css vscode extension with Dioxus?


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?


Solution

  • This configuration worked for me with Dioxus:

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