我被要求向当前使用 Tailwind 的现有项目添加 1 个新主题。

只有当 body 标签类属性中存在“theme-name”时，新主题才会生效。

现有的tailwind.config.js是这样的：

const defaultTheme = require('tailwindcss/defaultTheme');

var colors = {
  gray: {
    DEFAULT: '#868692',
    50: '#F9FAFB',
    100: '#F5F5FA',
    200: '#E9E9EE',
    300: '#D1D5DB',
    400: '#9CA3AF',
    500: '#868692',
    600: '#667085',
    700: '#504F4F',
    800: '#2D3047',
    900: '#111827'
  },
  primary: {
    DEFAULT: '#009BF5',
    50: '#DBF2FF',
    100: '#E5F6FE',
    200: '#8FD6FF',
    300: '#5CC3FF',
    400: '#29B0FF',
    500: '#009BF5',
    600: '#0078BD',
    700: '#005485',
    800: '#00314D',
    900: '#000D15',
    contrast: '#FFFFFF'
  },
  secondary: {
    DEFAULT: '#744FC6',
    50: '#EFEBF9',
    100: '#E2DAF3',
    200: '#C6B7E8',
    300: '#AB94DC',
    400: '#8F72D1',
    500: '#744FC6',
    600: '#5936A7',
    700: '#42287C',
    800: '#2C1B52',
    900: '#150D28',
    contrast: '#FFFFFF'
  },
  success: {
    DEFAULT: '#14CC76',
    50: '#B7F8D9',
    100: '#A2F6CF',
    200: '#78F2B9',
    300: '#4EEEA3',
    400: '#24EA8D',
    500: '#14CC76',
    600: '#10A761',
    700: '#0D824B',
    800: '#095D36',
    900: '#053720',
    contrast: '#FFFFFF'
  },
  error: {
    DEFAULT: '#FC446F',
    50: '#FFF9FA',
    100: '#FFE5EB',
    200: '#FEBCCC',
    300: '#FD94AD',
    400: '#FD6C8E',
    500: '#FC446F',
    600: '#FB0D44',
    700: '#CD0332',
    800: '#950225',
    900: '#5E0217',
    contrast: '#FFFFFF'
  },
  warning: {
    DEFAULT: '#FD8204',
    50: '#FEDDBA',
    100: '#FEF8EF',
    200: '#FEBE7D',
    300: '#FEAA55',
    400: '#FD962C',
    500: '#FD8204',
    600: '#D66D02',
    700: '#AE5901',
    800: '#864401',
    900: '#5D2F01',
    contrast: '#FFFFFF'
  }
};
colors.ui = {
  text: colors.gray['800'],
  textDim: colors.gray['500'],
  border: colors.gray['200'],
  borderDim: colors.gray['100'],
  borderDark: colors.gray['500'],
  bg: '#FFFFFF',
  bgDim: colors.gray['100'],
  bgDimmer: colors.gray['50']
};

/** @type {import("tailwindcss").Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  corePlugins: {
    preflight: false // To replace with another that solves some issues with tailwind preflight classes
  },
  theme: {
    extend: {
      colors: colors,
      textColor: {
        default: colors.ui.text,
        dim: colors.ui.textDim
      },
      backgroundColor: {
        default: colors.ui.bg,
        dim: colors.ui.bgDim,
        dimmer: colors.ui.bgDimmer
      },
      borderColor: {
        default: colors.ui.border,
        dim: colors.ui.borderDim,
        dark: colors.ui.borderDark
      },
      borderRadius: {
        card: '0.625rem'
      },
      boxShadow: {
        lg: '0 0 16px 8px rgba(0, 0, 0, 0.02)'
      },
      fontSize: {
        '2xs': '0.625rem',
        '3.5xl': '2rem'
      },
      fontFamily: {
        sans: ['Poppins', ...defaultTheme.fontFamily.sans],
        // TODO: Install Gibson font
        mono: [
          'canada-type-gibson, sans-serif',
          ...defaultTheme.fontFamily.mono
        ]
        // serif: ['icomoon, sans-serif', ...defaultTheme.fontFamily.serif]
      },
      zIndex: {
        dropdown: 1000,
        modal: 9000
      },
      transitionProperty: {
        position: 'width,height,left,top'
      },
      transitionTimingFunction: {
        'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)'
      }
    }
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')]
};

...这个新的附加主题中只有颜色发生了变化。

有人能给我指出正确的方向来设置这个吗？我的 body 标签类属性中已经有“主题名称”。

感谢您的指导， 克...