如何让VSCode的Tailwind CSS智能感知兼容MUI的slotProps？

我在现有项目中使用Tailwind CSS自定义MUI组件，示例代码如下：

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组件slotProps属性内嵌套的className无法获得智能感知效果。当前相关配置如下：

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

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

解决方法 #

方法1：扩展Tailwind IntelliSense的识别属性 #

在VSCode的settings.json中添加tailwindCSS.classAttributes配置，让插件识别slotProps下的className：

{
  // ...
  "tailwindCSS.classAttributes": ["class", "className", "slotProps.*.className"]
}

该配置会告诉Tailwind插件，除默认的class和className外，还要识别所有嵌套在slotProps层级下的className属性。

方法2：提取className到独立变量 #

若配置修改未生效，可将slotProps中的className提取为单独变量，变量内的字符串能被插件正常识别：

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

// 提取样式类到变量
const sliderClasses = {
  thumb: "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: "w-full relative inline-block h-2 cursor-pointer",
  rail: "bg-slate-100 dark:bg-slate-700 h-2 w-full rounded-full block absolute",
  track: "bg-cyan-500 dark:bg-cyan-400 h-2 absolute rounded-full"
};

const Slider = React.forwardRef(function Slider(
  props: SliderProps,
  ref: React.ForwardedRef<HTMLSpanElement>,
) {
  return (
    <BaseSlider
      {...props}
      ref={ref}
      slotProps={{
        thumb: { className: sliderClasses.thumb },
        root: { className: sliderClasses.root },
        rail: { className: sliderClasses.rail },
        track: { className: sliderClasses.track },
      }}
    />
  );
});

export default Slider;

方法3：使用Tailwind @apply指令（可选） #

如果项目支持CSS模块或全局样式，可将样式定义在CSS文件中，通过@apply组合Tailwind类，再在组件中引用：

/* slider.css */
.slider-thumb {
  @apply 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;
}

.slider-root {
  @apply w-full relative inline-block h-2 cursor-pointer;
}

.slider-rail {
  @apply bg-slate-100 dark:bg-slate-700 h-2 w-full rounded-full block absolute;
}

.slider-track {
  @apply bg-cyan-500 dark:bg-cyan-400 h-2 absolute rounded-full;
}

组件中导入并使用：

import "./slider.css";

// ...

slotProps={{
  thumb: { className: "slider-thumb" },
  root: { className: "slider-root" },
  rail: { className: "slider-rail" },
  track: { className: "slider-track" },
}}

内容的提问来源于stack exchange，提问作者MHebes