如何让 VSCode 的 tailwindcss intellisense 与 MUI 的 slotProps 配合使用？

Question

我正在尝试使用 tailwindcss 在现有项目中自定义 MUI 组件，如图所示这里：https://mui.com/base-ui/guides/working-with-tailwind-css/#create-the-slider-component

import { Slider as BaseSlider, SliderProps } from "@mui/base/Slider";
import * as React from "react";

const Slider = React.forwardRef(function Slider(
  props: SliderProps,
  ref: React.ForwardedRef<HTMLSpanElement>,
) {
  return (
    <BaseSlider
      {...props}
      ref={ref}
      slotProps={{
        thumb: {
          className:
            "ring-cyan-500 dark:ring-cyan-400 ring-2 w-4 h-4 -mt-1 -ml-2 flex items-center justify-center bg-white rounded-full shadow absolute",
        },
        root: { className: "w-full relative inline-block h-2 cursor-pointer" },
        rail: {
          className:
            "bg-slate-100 dark:bg-slate-700 h-2 w-full rounded-full block absolute",
        },
        track: {
          className: "bg-cyan-500 dark:bg-cyan-400 h-2 absolute rounded-full",
        },
      }}
    />
  );
});

export default Slider;

我在 VSCode 中安装了 Tailwind CSS IntelliSense，它适用于

className

:

但是，我无法通过 MUI 的

className

属性中的嵌套

slotProps

获得智能感知：

有什么方法可以让智能感知在这里工作吗？我的相关配置如下所示：

// settings.json
{
  // ...
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

// tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]
}

Answer 1

我通过将以下内容添加到我的

settings.json

中来接近答案：

// settings.json
{
  // ...
  "tailwindCSS.experimental.classRegex": [
    "className\\:.*?['\"]([^'\"]*)['\"]"
  ]
}

这不适用于跨多行分割的长类列表，例如

      slotProps={{
        rail: {
          className:
            "bg-slate-100 dark:bg-slate-700 h-2 w-full rounded-full block absolute",
        },
      }}

我试图让正则表达式跨越多行，但目前似乎不可能。