Tailwind css 背景渐变未应用

Question

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

这是我的 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 所以我添加到 tailwind.config 的所有其他颜色一旦我生成 post- css 只是不是梯度。

知道为什么吗？

谢谢

Answer 1

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

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

Tailwind css 背景渐变未应用

Tailwind css background gradient not applying

reactjs

tailwind-css