Tailwind 自定义颜色不合规

Question

在npm start (craco start)上一切工作正常并且正在编译颜色。

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

我试过了：

正在重新排序 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

您应该将 textColor 更改为颜色。

module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

Answer 2

要在 Tailwind 中自定义文本颜色，您需要像这样配置 tailwind.config.js

module.exports = {
  theme: {
    textColor: {
      'primary': '#3490dc',
      'secondary': '#ffed4a',
      'danger': '#e3342f',
    }
  }
}

您可以参考 Tailwind docs 了解更多信息。

Answer 3

感谢@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: [],
};

Answer 4

如果您使用 Tailwind 3，您可以：

module.exports = {
 theme: {
extend: {
  colors: {
    'regal-blue': '#243c5a',
    },
   }
  }
 }

如果没有用就加“延长”，所有颜色都会重置这使您不必使用安全列表

Tailwind 自定义颜色不合规

Tailwind Custom Colors Not Complied

javascript

reactjs

tailwind-css

craco