Tailwind CSS背景渐变不适用答案

【问题标题】：Tailwind css background gradient not applyingTailwind CSS背景渐变不适用
【发布时间】：2021-04-28 06:47:02
【问题描述】：

我的顺风背景渐变没有被应用

这是我的 html 代码：

<div>
   <button className="bg-gradient-to-r from-primary-orange via-secondary-orange to-lighter-orange w-4/5 p-4 mt-10 rounded">Search Flights</button>
</div>

我的tailwind.config.js：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    backgroundColor: theme => ({
      ...theme('colors'),
      'primary-orange': '#FF8C00',
      'secondary-orange':'#FFA500',
      'lighter-orange':'#FFD700'
     })
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

使用 post-css 运行我的 react 脚本，所以我添加到 tailwind.config 的所有其他颜色在我生成 post-css 后都可以正常工作，而不是渐变。

知道为什么吗？

谢谢

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

如果您想扩展默认调色板而不是覆盖它，请使用tailwind.config.js 文件的extend 部分。然后在其中添加gradientColorStops 属性，您可以在其中编写自定义颜色。

module.exports = {
    purge: [],
    darkMode: false, 
    theme: {
        extend: {
            gradientColorStops: theme => ({
                'primary': '#FF8C00',
                'secondary': '#FFA500',
                'danger': '#FFD700',
            }),
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
}

【讨论】：