顺风CSS渐变问题答案

【问题标题】：Issue with tailwind css gradient顺风CSS渐变问题
【发布时间】：2021-03-02 22:53:19
【问题描述】：

我正在尝试将渐变应用到我的导航链接，但它没有显示任何结果。这是我的代码

<NavLink className="block p-4 pr-0 mr-3 bg-gradient-to-br from-purple-500 
  to-indigo-500 rounded-tr-full rounded-br-full text-textPrimary 
  hover:text-white text-xl" to="/dashboard">
    <i class="fas fa-laptop-house mr-3"></i>
    Dashboard
</NavLink>

我正在使用顺风 css 并做出反应

【问题讨论】：

如果您检查元素是否将样式应用于类？
是的，样式应用于元素。除了渐变，所有样式都可以正常工作
还有其他应用背景颜色的东西吗？如果没有看到任何这些，就很难排除故障。
如果我将背景颜色应用到导航项，它可以正常工作，但渐变不起作用。我的代码是否正确？？
您的代码似乎是正确的。 Codepen NavLink 组件中是否存在应用样式的内容？您使用的是古代版本的顺风 css 吗？您能否发布一个运行示例来显示您的行为？

标签： reactjs tailwind-css

【解决方案1】：

这应该可以正常工作 (https://play.tailwindcss.com/xnQDaASzOL)。

<NavLink /> 组件可能有问题。 className 道具是否很好地传播到内部组件？

确实，在将自定义组件传播到内部组件之前，React 无法理解 className，请参阅此 answer。

【讨论】：

【解决方案2】：

您的配置中似乎没有颜色架构。

只需将其添加到您的 tailwind.config.js。

const colors = require("tailwindcss/colors");

module.exports = {
  theme: {
    colors: {
      blue: {
        ...colors.blue,
        "your custom blue color"
      },
      green: colors.green,
      pink: colors.pink
      ...etc
    }
  },
};

它应该工作。只需选择要包含在架构中的颜色。 ...colors.blue 将为您提供所有深浅不一的蓝色。在此之后，应该可以使用蓝色渐变。

【讨论】：