React项目中使用Material Tailwind如何保留Tailwind全部特性？

问题核心是withMT()函数会替换Tailwind的默认主题配置（比如颜色系统），导致你之前用的原生颜色类失效。要同时保留两者的特性，只需在Tailwind配置中手动扩展原生主题属性即可：

1. 恢复原生Tailwind颜色 #

在tailwind.config.js中导入Tailwind的默认颜色库，并将需要的颜色添加到theme.extend.colors中：

const withMT = require("@material-tailwind/react/utils/withMT");
const colors = require('tailwindcss/colors');

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        // 按需添加你需要的原生颜色，或者用...colors导入全部
        slate: colors.slate,
        amber: colors.amber,
        cyan: colors.cyan,
        gray: colors.gray,
        // 其他需要的颜色都可以在这里添加
      },
    },
  },
  plugins: [],
});

如果想一次性保留所有原生Tailwind颜色，可以直接用扩展运算符：

colors: { ...colors }

2. 保留其他Tailwind原生特性 #

如果还有其他原生样式（比如字体、间距）被覆盖，同样可以导入Tailwind默认主题并扩展：

const withMT = require("@material-tailwind/react/utils/withMT");
const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = withMT({
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: { ...colors },
      fontFamily: {
        sans: [...defaultTheme.fontFamily.sans],
      },
      // 其他需要保留的原生样式都可以在这里扩展
    },
  },
  plugins: [],
});

原理说明 #

withMT()会注入Material Design的主题配置，覆盖Tailwind的默认值，但通过theme.extend添加的属性会和Material的配置共存，不会被覆盖，这样就能同时使用Material Tailwind的组件和原生Tailwind的所有样式特性。

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