使用Tailwind CSS渐变出现问题

Question

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

<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>

我正在使用Tailwind CSS和React。

- r121

---

如果你检查元素，样式是否应用到类上？ - isherwood

是的，样式已应用于元素。除了渐变效果之外，所有样式都正常工作。 - r121

还有其他可以应用背景颜色的东西吗？如果没有看到任何背景颜色，很难进行故障排除。 - isherwood

昨天，我升级到了v2.0版本。 - r121

我的配置文件出了一些问题，现在已经修好了。谢谢！ - r121

Answer 1

看起来你的配置文件中没有颜色方案。

只需将以下内容添加到你的 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将为您提供所有蓝色的色调。之后，使用蓝色渐变应该可以工作。

- Dex

Answer 2

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

你的<NavLink />组件可能存在问题。你确定className属性能够正确传递给内部组件吗？

确实，React在自定义组件中无法理解className，除非你将其传递给内部组件，请参考这个答案。

- Pol

Answer 3

将以下代码添加到您的 tailwind.config.js 文件中：

    module.exports = {
      content: ["./src/**/*.{js,jsx}"],
      theme: {
        extend: {
          backgroundImage: {
            'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
          }
        }
      }
    }

- Siddharth Kumar Gope

Answer 4

我遇到了同样的问题，tailwind配置。

export default {
 content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
 theme: {
 extend: {
   backgroundImage: {
    landing: 'linear-gradient(rgba(35, 25, 23, .48), rgba(35, 25, 23, .48)), url(/src/assets/landing.jpg)',
    interior: 'linear-gradient(rgba(35, 25, 23, .48), rgba(35, 25, 23, .48)), url(/src/assets/interior.jpg)',
    church: 'linear-gradient(rgba(35, 25, 23, .48), rgba(35, 25, 23, .48)), url(/src/assets/church.jpg)',
   },
   },
},
plugins: [],
};

<div className="bg-landing"></div>

- Raphael

Answer 5

这种情况会发生在您自定义了tailwind.config.js文件中的相关属性，而不是"扩展"它们。

例如，如果您覆盖了colors或backgroundImage属性，那么原始的colors / backgroundImage预设将不再可用。

例如，如果您添加了一些背景图像（覆盖的属性），那么渐变效果（用于创建CSS "background-images"）将不再可用。

module.exports = {
    // ...
    theme: {
        backgroundImage: {
            'someImage': 'url("/images/some-image.png")',
        },
        extend: {
            // ...

你应该将这个定制移到extend中，像这样：

module.exports = {
    // ...
    theme: {
        extend: {
            backgroundImage: {
                'someImage': 'url("/images/some-image.png")',
            },
            // ...

- kca