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 运行我的 react 脚本，以便我添加到 tailwind.config 的所有其他颜色在生成 post-css 后都能正常工作，而不是渐变。

知道为什么吗？

谢谢

Answer 1

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

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

Tailwind css 背景渐变不适用

1 个答案: