1

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

4 回答 4

5

感谢@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: [],
};
于 2021-02-23T10:30:29.653 回答
1

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

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

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

于 2022-01-05T19:45:47.950 回答
0

您应该将 textColor 更改为颜色。

module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}
于 2021-02-23T09:29:05.020 回答
0

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

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

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

于 2021-02-23T09:30:28.033 回答