如何在MUI与Tailwind CSS中共用同一调色板？

在同时使用MUI（Material UI）和Tailwind CSS时，希望二者共用同一套调色板，比如让MUI主题直接复用Tailwind配置里定义的颜色。目前我通过单独的colors.js定义颜色常量，再分别导入到MUI的主题文件和Tailwind配置文件中，但觉得这个方案不够优雅，想找更好的实现方式。

当前实现方案代码 #

colors.js

module.exports = {
  primaryLightColor: '#757ce8',
  primaryMainColor: '#224AA6',
  primaryDarkColor: '#042757',

  secondaryLightColor: '#BDC1C9',
  secondaryMainColor: '#8B969D',
  secondaryDarkColor: '#4C5356',

  errorColor: '#F44336',
  warningColor: '#FF9800',
  infoColor: '#A5C8FF',
  successColor: '#82C64D',
  backgroundColor: '#F7F8FA',
};

theme.tsx

import { createTheme } from '@mui/material';
import {
  primaryLightColor,
  primaryMainColor,
  primaryDarkColor,
  secondaryLightColor,
  secondaryMainColor,
  secondaryDarkColor,
} from './colors';

export const theme = createTheme({
  palette: {
    primary: {
      light: primaryLightColor,
      main: primaryMainColor,
      dark: primaryDarkColor,
    },
    secondary: {
      light: secondaryLightColor,
      main: secondaryMainColor,
      dark: secondaryDarkColor,
    },
  },
});

tailwind.config.js

/** @type {import('tailwindcss').Config} */
const {
  primaryLightColor,
  primaryMainColor,
  primaryDarkColor,
  secondaryLightColor,
  secondaryMainColor,
  secondaryDarkColor,
  errorColor,
  warningColor,
  infoColor,
  successColor,
  backgroundColor,
} = require('./app/styles/colors.js');

module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  important: '#root',
  theme: {
    colors: {
      primary: {
        light: primaryLightColor,
        main: primaryMainColor,
        dark: primaryDarkColor,
      },
      secondary: {
        light: secondaryLightColor,
        main: secondaryMainColor,
        dark: secondaryDarkColor,
      },
      error: errorColor,
      warning: warningColor,
      info: infoColor,
      success: successColor,
      background: backgroundColor,
    },
    extend: {},
  },
  plugins: [],
};

优化方案：统一颜色配置结构，实现双向复用 #

方案1：基于Tailwind风格的统一颜色文件

创建一个符合Tailwind颜色结构的配置文件，让MUI和Tailwind直接复用该文件，避免零散的变量定义：

1. 创建统一颜色文件 tailwind-colors.js

module.exports = {
  primary: {
    light: '#757ce8',
    main: '#224AA6',
    dark: '#042757',
  },
  secondary: {
    light: '#BDC1C9',
    main: '#8B969D',
    dark: '#4C5356',
  },
  error: '#F44336',
  warning: '#FF9800',
  info: '#A5C8FF',
  success: '#82C64D',
  background: '#F7F8FA',
};

2. 配置Tailwind CSS

直接在tailwind.config.js中引入该文件：

/** @type {import('tailwindcss').Config} */
const tailwindColors = require('./app/styles/tailwind-colors.js');

module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  important: '#root',
  theme: {
    colors: tailwindColors,
    extend: {},
  },
  plugins: [],
};

3. 配置MUI主题

在theme.tsx中引入统一颜色文件，并映射为MUI需要的调色板结构：

import { createTheme } from '@mui/material';
import tailwindColors from './tailwind-colors';

export const theme = createTheme({
  palette: {
    primary: tailwindColors.primary,
    secondary: tailwindColors.secondary,
    error: { main: tailwindColors.error },
    warning: { main: tailwindColors.warning },
    info: { main: tailwindColors.info },
    success: { main: tailwindColors.success },
    background: { default: tailwindColors.background },
  },
});

方案2：让MUI直接读取Tailwind配置文件

如果希望颜色定义完全以Tailwind配置为唯一来源，可以直接在MUI主题中导入Tailwind的配置文件：

修改tailwind.config.js，导出颜色对象

/** @type {import('tailwindcss').Config} */
const tailwindColors = {
  primary: {
    light: '#757ce8',
    main: '#224AA6',
    dark: '#042757',
  },
  secondary: {
    light: '#BDC1C9',
    main: '#8B969D',
    dark: '#4C5356',
  },
  error: '#F44336',
  warning: '#FF9800',
  info: '#A5C8FF',
  success: '#82C64D',
  background: '#F7F8FA',
};

module.exports = {
  corePlugins: {
    preflight: false,
  },
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  important: '#root',
  theme: {
    colors: tailwindColors,
    extend: {},
  },
  plugins: [],
};

// 导出颜色对象供MUI使用
module.exports.tailwindColors = tailwindColors;

在MUI主题中导入Tailwind的颜色配置

import { createTheme } from '@mui/material';
import { tailwindColors } from './tailwind.config';

export const theme = createTheme({
  palette: {
    primary: tailwindColors.primary,
    secondary: tailwindColors.secondary,
    error: { main: tailwindColors.error },
    warning: { main: tailwindColors.warning },
    info: { main: tailwindColors.info },
    success: { main: tailwindColors.success },
    background: { default: tailwindColors.background },
  },
});

这两种方案都能实现颜色的统一管理，避免重复定义，比原方案更简洁易维护。

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