不符合 Tailwind 自定义颜色

Posted 2023-03-07

【中文标题】不符合 Tailwind 自定义颜色

【英文标题】：Tailwind Custom Colors Not Complied

【发布时间】：2021-05-25 13:06:19

【问题描述】：

在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: [],
;

【问题讨论】：

听起来您的样式正在被清除。您是否真的在标记中使用它们？

是的，@George。 IntelliSense 也在 VSCode 中展示了它们。您可以在这里查看网站（例如我的linkedin图标上的hover:denim）：aboqasem.dev 源代码：github.com/aboqasem/aboqasem.dev/blob/main/src/pages/…

Purge 将无法识别您对此类的使用。见tailwindcss.com/docs/…。具体来说，“不要使用字符串连接来创建类名”。清除在任何方面都不是“智能”的，它通过将您的实用程序与整个模板中的类（或任何字符串，真的..）进行匹配来工作。

非常感谢@George！你推荐使用safelist: ['bg-red-500', 'px-4'], 选项吗？或者将我的IContact.color 重构为text-denim 而不是denim（我认为这不会有效？）？

哦，我想是的：regex101.com/r/9XRVMP/1

【参考方案1】：

您应该将 textColor 更改为颜色。

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

【参考方案2】：

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

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

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

【参考方案3】：

感谢@George指出问题：

Purge 将无法识别您对此类的使用。见https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html。具体来说，“不要使用字符串连接来创建类名”。清除在任何方面都不是“智能”的，它通过将您的实用程序与整个模板中的类（或任何字符串，真的..）进行匹配来工作。

一种可能的解决方案是将要清除的类添加到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: [],
;

【参考方案4】：

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

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

如果没有使用，只需添加“扩展”，所有颜色将被重置 这使您不必使用安全列表