如何在 Next.js 14 中同时使用 Tailwind CSS 和 Material Tailwind？

Next.js 14 项目中 Tailwind CSS 与 Material Tailwind 的完美共存之道

在追求用户界面美观与功能性的路上，Next.js 14 开发者常常选择 Tailwind CSS 和 Material Tailwind 这对黄金搭档。然而，将两者整合到同一个 tailwind.config.js 文件中，却可能像一场复杂的探险，稍有不慎就会陷入样式冲突的迷宫。本文将为你指引一条清晰的道路，轻松解决配置难题，实现 Tailwind CSS 和 Material Tailwind 的和谐共舞。

不少开发者在实践中，按照 Material Tailwind 官方文档的步骤，将 tailwind.config.js 文件修改成如下形式：

import type { Config } from 'tailwindcss'
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./pages/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

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

表面上看，代码编译顺利，一切正常。但实际运行项目时，却发现只有 Material Tailwind 的样式生效，而 Tailwind CSS 仿佛消失了一般。

问题的根源在于，上述代码定义了两个独立的配置对象，而实际上我们只需要一个。withMT() 函数的作用是包裹整个 Tailwind CSS 配置，包括你原有的配置和 Material Tailwind 的配置。

为了解决这个问题，我们需要调整策略，将 withMT() 函数应用于整个 Tailwind CSS 配置，并将 Material Tailwind 的 content 属性合并到现有的 content 数组中。

以下是修正后的 tailwind.config.ts 文件代码：

import type { Config } from 'tailwindcss'
const withMT = require("@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: [],
};

module.exports = withMT(config);

在这个修正后的版本中，我们首先导入了 withMT 函数。随后，定义了 config 对象，它包含了所有 Tailwind CSS 配置。最后，将 withMT(config) 作为模块导出，确保 withMT 函数能够正确处理 Tailwind CSS 配置，并将 Material Tailwind 的样式也包含进来。

通过这种方式修改 tailwind.config.js 文件，你就可以在 Next.js 14 项目中同时使用 Tailwind CSS 和 Material Tailwind，告别样式冲突的烦恼，尽情挥洒创意，打造出令人惊艳的用户界面。

为了帮助你更好地理解和应用上述解决方案，我们还整理了一些常见问题及其解答：

常见问题解答

1. 为什么在整合 Tailwind CSS 和 Material Tailwind 时会出现样式冲突？

当两个 CSS 框架的样式规则发生重叠时，就会出现样式冲突。Tailwind CSS 和 Material Tailwind 都定义了大量的 CSS 类名，如果配置不当，就可能导致其中一个框架的样式被另一个框架覆盖。

2. withMT() 函数的作用是什么？

withMT() 函数是 Material Tailwind 提供的一个工具函数，用于将 Material Tailwind 的配置合并到 Tailwind CSS 配置中。它会自动处理样式优先级等问题，确保 Material Tailwind 的样式能够正确应用。

3. 如何检查 Tailwind CSS 和 Material Tailwind 是否都已正确配置？

你可以尝试在你的项目中使用 Tailwind CSS 和 Material Tailwind 的类名，然后在浏览器中查看页面源代码，检查样式是否已成功应用。你也可以使用浏览器的开发者工具来检查元素的样式。

4. 如果我仍然遇到样式冲突，应该如何解决？

你可以尝试使用更具体的 CSS 选择器来覆盖冲突的样式。你也可以查阅 Tailwind CSS 和 Material Tailwind 的文档，了解更多关于样式优先级和冲突解决的信息。

5. 除了本文提到的方法，还有其他方法可以整合 Tailwind CSS 和 Material Tailwind 吗？

是的，还有一些其他的方法可以整合 Tailwind CSS 和 Material Tailwind，例如使用 CSS Modules 或 Styled Components。你可以根据你的项目需求和个人偏好选择合适的方法。