How can I add a custom color to a gradient with Tailwind and React?

Question

Here's my 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: [],
}

And my React component div:

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

But the screen is just grey. How do I use these colors in a gradient?

Answer 1

Unless you meant to override all Tailwind colors, extending the defaults instead works best.

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

When using your colors, you don't need to add the colors key to the name.

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

Answer 2

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

Answer 3

You can use any arbitrary color values.

You can use hex values:

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

Or you can use rgb values:

<div className="bg-gradient-to-r from-[rgba(6,6,6,0.00008)] to-[rgba(0,0,0,0.8)]">

Note: When using rgb(a) values there cannot be any whitespaces in the value. rgba(6, 6, 6, 0.8) will not work.

See the Tailwind docs for more info on using arbitrary values (JIT mode).