I'm creating a project using vite react-ts, then I'm trying to install the package @material-tailwind/react, I've made sure the package is installed in package.json with version

"@material-tailwind/react": "^2.0.7",

I've also configured tailwind.config.js as follows:

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: [],
});

in the main.tsx section, I have also configured the following:

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>
);

why when I hover over import { ThemeProvider } from "@material-tailwind/react" I get typescript error 'Cannot find module '@material-tailwind/react' or its corresponding type declarations.'?

how to solve that error?

I'm creating a project using vite react-ts, then I'm trying to install the package @material-tailwind/react, I've made sure the package is installed in package.json with version

"@material-tailwind/react": "^2.0.7",

I've also configured tailwind.config.js as follows:

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: [],
});

in the main.tsx section, I have also configured the following:

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>
);

why when I hover over import { ThemeProvider } from "@material-tailwind/react" I get typescript error 'Cannot find module '@material-tailwind/react' or its corresponding type declarations.'?

how to solve that error?

• javascript
• reactjs
• typescript
• tailwind-css

Share Improve this question Follow asked Jul 22, 2023 at 4:44 AlwisteinsAlwisteins 5111 silver badge33 bronze badges 1

• 2 This seems to be an issue with the 2.0.7 release. See this issue github./creativetimofficial/material-tailwind/issues/404. – gnerkus Commented Jul 22, 2023 at 8:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I found the same issue for version v2.0.7. You can either downgrade the package to v2.0.6 (or older) or try this way:

const withMT = require('@material-tailwind/react/src/utils/withMT');

Maybe this can help, for V2.1.8, on your config file:

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

/** @type {import('tailwindcss').Config} */

export default withMT({
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

Use Collapse instead of MobileNav This is how it was fixed for me