如何使用 Tailwind 和 React 为渐变添加自定义颜色？答案

【问题标题】：How can I add a custom color to a gradient with Tailwind and React?如何使用 Tailwind 和 React 为渐变添加自定义颜色？
【发布时间】：2021-06-27 17:14:42
【问题描述】：

这是我的 tailwind.config.js：

const colors = require('tailwindcss/colors')

module.exports = {
    purge: {
        content: ['./pages/**/*.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
    },
    theme: {
        colors: {
            'BASE_YELLOW': '#C9FB5C',
            'black': '000',
        },
    },
    variants: {},
    plugins: [],
}

还有我的 React 组件 div：

<div className="w-full min-h-screen flex items-center justify-center bg-gradient-to-r from-colors.BASE_YELLOW to-colors.black ...">

但屏幕只是灰色的。如何在渐变中使用这些颜色？

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

<div className="bg-gradient-to-r from-[#ffedd5] to-[red]">

【讨论】：

【解决方案2】：

除非您打算覆盖所有 Tailwind 颜色，否则 extending the defaults 效果最好。

module.exports = {
 purge: {
  content: ['./pages/**/*.{js,jsx,ts,tsx}', './src/**/*.{js,jsx,ts,tsx}'],
 },
 theme: {
  extend: {
   colors: {
    'BASE_YELLOW': '#C9FB5C',
     'black': '000',
   }
  }
 },
 variants: {},
 plugins: [],
}

使用颜色时，无需在名称中添加colors 键。

<div className="w-full min-h-screen flex items-center justify-center bg-gradient-to-r from-BASE_YELLOW to-black ...">

【讨论】：