如何使用 Dioxus 设置 tailwind css vscode 扩展？答案

【问题标题】：How can I setup tailwind css vscode extension with Dioxus?如何使用 Dioxus 设置 tailwind css vscode 扩展？
【发布时间】：2023-02-10 23:45:39
【问题描述】：

我目前正在使用 Dioxus (Rust) 作为前端 WASM。

我正在寻找设置 Tailwind CSS IntelliSense（Tailwind 通过 CLI 工作），但我似乎无法让它工作。

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

这是一个示例组件：

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,
                ">"
            }
        }
    ))
}

有任何想法吗？

【问题讨论】：

您确定 Tailwind CSS 扩展支持 linting CSS 类内联 Rust 代码吗？该文档仅将 html、css 或 javascript 列为受支持的文件解释。
嗨@E_net4thecommentflagger，我不太确定。我知道你可以让它在扩展的配置中解释不同的语言。
这不会自动使其支持在任何代码文件中查找 Tailwind 类。其一，HTML 与 Rust 非常不同。
Yew 支持 HTML 语法，你可以成功使用扩展。我想知道是否有任何配置可以支持 Dioxus 中的 class 字段作为 Yew。

标签： rust dioxus

【解决方案1】：

此配置适用于 Dioxus：

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

【讨论】：