javascript - 不符合 Tailwind 自定义颜色

Question

在 npm start (craco start) 一切工作正常，颜色正在编译中。

在运行 npm run build (craco build) 时，每个配置只编译一种颜色，dallas 来自 来自 theme.gradientColorStops 的 theme.textColor 和 vista-white。

我试过了:

• 重新排序 theme.textColor 属性。
• 删除 node_modules 和 npm i。
• 删除 build 并重建。

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
};

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    textColor: (theme) => ({
      ...theme('colors'),
      dallas: '#664A2D',
      'blue-charcoal': '#24292E',
      denim: '#0D66C2',
      'spring-green': '#05E776',
      flamingo: '#E65A4D',
    }),
    gradientColorStops: (theme) => ({
      ...theme('colors'),
      'vista-white': '#E1DFDC',
    }),
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Answer 1

感谢 @George指出问题:

Purge will not recognise your usage of this class. See https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html. Specifically, "Don't use string concatenation to create class names". Purge is not 'smart' in any way, it works by matching your utilities against classes (or any string, really..) throughout your templates.

一种可能的解决方案是将要清除的类添加到 purge.safelist:

// tailwind.config.js
module.exports = {
  // Added safelist
  purge: {
    content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    options: {
      safelist: ['hover:text-blue-charcoal', 'hover:text-denim', 'hover:text-spring-green', 'hover:text-flamingo'],
    },
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    textColor: (theme) => ({
      ...theme('colors'),
      dallas: '#664A2D',
      'blue-charcoal': '#24292E',
      denim: '#0D66C2',
      'spring-green': '#05E776',
      flamingo: '#E65A4D',
    }),
    gradientColorStops: (theme) => ({
      ...theme('colors'),
      'vista-white': '#E1DFDC',
    }),
  },
  variants: {
    extend: {},
  },
  plugins: [],
};