tailwind.config.js 中的自定义颜色在开发中有效但破坏了生产反应构建

Question

我有一个 tailwind.config.js 文件，如下所示：

const colors = require('tailwindcss/colors');
const plugin = require('tailwindcss/plugin');

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/css/safelist.txt'],
  theme: {
    extend: {
      animation: ['animate-pulse', 'animate-spin', 'visually-hidden'],
      boxShadow: {
        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
      },
      colors: {
        gray: colors.blueGray,
        'light-blue': colors.sky,
        red: colors.rose,
        'navy-blue': '#273A72',
        'cobalt': '#1F6DA4',
        'light-blue':'#A6CEE3',
        'light-grey':'#E8E8E8',
        'bright-red': "#FF0000",
        'pastel-green': "#53BB78"
      },
      outline: {
        blue: '2px solid rgba(0, 112, 244, 0.5)',
      },
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
        'Roboto': ['Roboto', 'sans-serif']
      },
      fontSize: {
        xs: ['0.75rem', { lineHeight: '1.5' }],
        sm: ['0.875rem', { lineHeight: '1.5715' }],
        base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
        lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
        xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
        "2xl": ['1.5rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
      },
      screens: {
        xs: '480px',
      },
      borderWidth: {
        3: '3px',
      },
      minWidth: {
        36: '9rem',
        44: '11rem',
        56: '14rem',
        60: '15rem',
        72: '18rem',
        80: '20rem',
      },
      maxWidth: {
        '8xl': '88rem',
        '9xl': '96rem',
      },
      zIndex: {
        60: '60',
      },
    },
  },
  plugins: [
    // eslint-disable-next-line global-require
    require('@tailwindcss/forms'),
    // add custom variant for expanding sidebar
    plugin(({ addVariant, e }) => {
      addVariant('sidebar-expanded', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => `.sidebar-expanded .${e(`sidebar-expanded${separator}${className}`)}`);
      });
    }),
  ],
};

当运行在节点开发服务器中时，一切正常。但是，使用此文件构建会使所有内容变为空白并引发

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

在控制台中。

当我将 tailwind 配置文件更改为

const colors = require('tailwindcss/colors');
const plugin = require('tailwindcss/plugin');

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html', './src/css/safelist.txt'],
  theme: {
    extend: {
      animation: ['animate-pulse', 'animate-spin', 'visually-hidden'],
      boxShadow: {
        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
      },
      colors: {
        gray: colors.blueGray,
        'light-blue': colors.sky,
        red: colors.rose,
      },
      outline: {
        blue: '2px solid rgba(0, 112, 244, 0.5)',
      },
      fontFamily: {
        inter: ['Inter', 'sans-serif'],
        'Roboto': ['Roboto', 'sans-serif']
      },
      fontSize: {
        xs: ['0.75rem', { lineHeight: '1.5' }],
        sm: ['0.875rem', { lineHeight: '1.5715' }],
        base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
        lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
        xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
        "2xl": ['1.5rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
      },
      screens: {
        xs: '480px',
      },
      borderWidth: {
        3: '3px',
      },
      minWidth: {
        36: '9rem',
        44: '11rem',
        56: '14rem',
        60: '15rem',
        72: '18rem',
        80: '20rem',
      },
      maxWidth: {
        '8xl': '88rem',
        '9xl': '96rem',
      },
      zIndex: {
        60: '60',
      },
    },
  },
  plugins: [
    // eslint-disable-next-line global-require
    require('@tailwindcss/forms'),
    // add custom variant for expanding sidebar
    plugin(({ addVariant, e }) => {
      addVariant('sidebar-expanded', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => `.sidebar-expanded .${e(`sidebar-expanded${separator}${className}`)}`);
      });
    }),
  ],
};

（除自定义颜色外其他都一样）

自定义颜色明显消失了，但突然一切正常，生产版本正确渲染。

有什么方法可以解决这个问题（修复被定义为带有颜色的工作生产构建）？

Answer 1

经过许多小时的工作，我终于弄明白了这一点

出于某种原因，有这条线

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

使用它提供的颜色会导致 React 的生产构建出现问题。

因此，我只是明确定义了所有需要的颜色并删除了该导入（即像这样：

...
colors: {
   ...
   red: {
          100: '#fff5f5',
          200: '#fed7d7',
          300: '#feb2b2',
          400: '#fc8181',
          500: '#f56565',
          600: '#e53e3e',
          700: '#c53030',
          800: '#9b2c2c',
          900: '#742a2a'
        },
        gray: {
          100: '#f7fafc',
          200: '#edf2f7',
          300: '#e2e8f0',
          400: '#cbd5e0',
          500: '#a0aec0',
          600: '#718096',
          700: '#4a5568',
          800: '#2d3748',
          900: '#1a202c'
        },
        white: '#fff',
        black: '#000',
        'navy-blue': '#273A72',
        'cobalt': '#1F6DA4',
        'light-blue':'#A6CEE3',
        'light-grey':'#E8E8E8',
        'bright-red': "#FF0000",
        'pastel-green': "#53BB78"
}
...

并删除了顶部的行。这消除了所有构建错误。

tailwind.config.js 中的自定义颜色在开发中有效但破坏了生产反应构建

Custom colors in tailwind.config.js work in dev but break production react build

reactjs

tailwind-css