Vite React-TS项目中@material-tailwind/react模块及类型声明找不到的问题求解

我用Vite React-TS创建项目，安装了^2.0.7版本的@material-tailwind/react包，package.json里能确认这个包存在。已经完成了tailwind.config.js和main.tsx的配置：

tailwind.config.js配置 #

import withMT from "@material-tailwind/react/utils/withMT";

/** @type {import('tailwindcss').Config} */
module.exports = withMT({
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
    colors: {
      palette: {
        bg: "#f8f9fa",
        white: "#fff",
        down: "#FF1700",
        up: "#06FF00",
        100: "#4B49AC",
        200: "#eef2ff",
        300: "#7DA0FA",
        400: "#7978E9",
        500: "#F3797E",
      },
    },
  },
  plugins: [],
});

main.tsx配置 #

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

import { ThemeProvider } from "@material-tailwind/react";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

但遇到两个问题：

• 提示找不到模块@material-tailwind/react/utils/withMT
• 鼠标悬停在import语句上时，TypeScript报错：Cannot find module '@material-tailwind/react' or its corresponding type declarations.

1. 模块路径变更：@material-tailwind/react v2版本中，withMT工具函数的导入路径已经修改，原来的@material-tailwind/react/utils/withMT路径在v2里被移除了。
2. 类型声明缺失：v2版本可能没有自动附带完整的TypeScript类型声明文件，或者安装过程中类型文件未正确生成/安装，导致TS无法识别模块类型。

1. 修正withMT的导入路径 #

v2版本中withMT的正确导入路径是@material-tailwind/react本身，修改后的tailwind.config.js可以用两种写法：

CommonJS写法（原格式） #

const withMT = require("@material-tailwind/react");

/** @type {import('tailwindcss').Config} */
module.exports = withMT({
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
    colors: {
      palette: {
        bg: "#f8f9fa",
        white: "#fff",
        down: "#FF1700",
        up: "#06FF00",
        100: "#4B49AC",
        200: "#eef2ff",
        300: "#7DA0FA",
        400: "#7978E9",
        500: "#F3797E",
      },
    },
  },
  plugins: [],
});

ES模块写法（适配Vite的ES模块环境） #

import withMT from "@material-tailwind/react";

/** @type {import('tailwindcss').Config} */
export default withMT({
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
    colors: {
      palette: {
        bg: "#f8f9fa",
        white: "#fff",
        down: "#FF1700",
        up: "#06FF00",
        100: "#4B49AC",
        200: "#eef2ff",
        300: "#7DA0FA",
        400: "#7978E9",
        500: "#F3797E",
      },
    },
  },
  plugins: [],
});

2. 修复TypeScript类型错误 #

• 先清理依赖重新安装，确保依赖和类型文件完整：

rm -rf node_modules package-lock.json
npm install

• 如果重新安装后还是有类型问题，手动添加类型声明文件：
  在项目src目录下创建types/material-tailwind.d.ts文件，内容如下：

declare module "@material-tailwind/react" {
  import type { Config } from 'tailwindcss';
  import type { ReactNode } from 'react';
  export function withMT(config: Config): Config;
  export const ThemeProvider: React.FC<{ children: ReactNode }>;
  // 如果你用到了其他组件，可以在这里补充对应的类型声明
}

• 确保tsconfig.json的include字段包含这个类型文件：

{
  "compilerOptions": {
    // 其他配置...
  },
  "include": ["src/**/*", "src/types/**/*"]
}

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