顺风CSS渐变问题

Posted 2023-03-06

【中文标题】顺风CSS渐变问题

【英文标题】：Issue with tailwind css gradient

【发布时间】：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 吗？您能否发布一个运行示例来显示您的行为？

【参考方案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 将为您提供所有深浅不一的蓝色。在此之后，应该可以使用蓝色渐变。