Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to add custom gradian color add to config?

See original GitHub issue

How to add this to the config file

inear-gradient(to right, #007991, #78ffd6)

    theme: {
        extend: {
            colors: {
                primary: "#164F63",,
                secondary: "#A3C0BA",
                neutral: "#FAFAFA"
            },
        }
    }

Issue Analytics

State:
Created 2 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

2reactions

schelmocommented, Mar 27, 2021

you can do so also via backgroundImage to change only bg-primary (other utilities shouldnt be affected)

{
  theme: {
    extend: {
      colors: {
        primary: "#164F63",
        secondary: "#A3C0BA",
        neutral: "#FAFAFA"
      },
      backgroundImage: {
        primary: 'linear-gradient(to right, #007991, #78ffd6)',
      },
    },
  },
}

then you can use bg-primary

1reaction

antfucommented, Mar 27, 2021

The way you have configured looks fine, you can use this in your classes

bg-gradient-to-r from-primary to-secondary

Top Results From Across the Web

Wanna customize Gradient and add in tailwind config js file

How can I customize gradient and add tailwind configuration object? i.e. I have plenty of chances to use gradient - bg-gradient-to-r from-color ......

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

Here's my tailwind.config.js:

A guide to adding gradients with Tailwind CSS - LogRocket Blog

In this blog, we'll use Tailwind CSS to create beautiful background, text, border, and underline gradients, as well as animate gradients.

TailwindCSS - Custom Colors and Gradients - YouTube

So many colors, cool!ERROR with $ npx svelte- add tailwindcss --jit ..?See: https://github.com/svelte- add /tailwindcss/issues/41Or try to add ...

How To Add Color with a Custom Gradient Adjustment Layer ...

Quickly add color and preserve the texture of a paper using a custom Gradient Adjustment Layer with a Linear Burn Blend Mode.