如何在Next.js14中同时配置Tailwind CSS与Material Tailwind

你的问题出在同时导出了两个独立的Tailwind配置，且未将原有完整Tailwind配置整合到withMT函数中。当前生效的是module.exports里的极简配置（仅包含pages目录），而你原本的自定义配置（覆盖components、app目录，自定义主题等）根本没被Tailwind加载，因此只有Material Tailwind的样式生效，原生Tailwind配置不工作。

正确配置代码 #

修改tailwind.config.ts，将原有完整配置传入withMT函数，统一使用ES模块语法导出：

import type { Config } from 'tailwindcss';
import withMT from "@material-tailwind/react/utils/withMT";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
};

export default withMT(config);

关键说明 #

1. 统一模块语法：TS项目优先使用ES模块的import/export，替代CommonJS的require/module.exports，避免模块系统冲突。
2. 整合配置逻辑：将原有完整config对象作为参数传给withMT函数，让Material Tailwind基于你的自定义配置扩展，而非覆盖原有规则。
3. 单一导出入口：只导出经过withMT包裹后的配置，确保Tailwind仅加载这一份正确的配置文件。

修改后重启开发服务器，原生Tailwind的自定义配置与Material Tailwind组件样式即可同时生效。

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