How can I add more than 3 stops for Tailwind gradient

Question

There are three gradient stops- from-*, via-* and to-* are available as Tailwind utilities. I need 1 more gradient stop like via2-* which will support Tailwind's color and percentage. Is it a good idea when I need a gradient color with four stops?

Answer 1

You could consider using a custom background image.

Via configuration:

tailwind.config = {
  theme: {
    extend: {
      backgroundImage: ({ theme }) => ({
        foo: `linear-gradient(${theme('colors.blue.500')},${theme('colors.green.500')},${theme('colors.red.500')},${theme('colors.yellow.500')})`,
      }),
    },
  },
};

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-foo h-40 w-40">

Or as an arbitrary value class:

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-[linear-gradient(theme(colors.blue.500),theme(colors.green.500),theme(colors.red.500),theme(colors.yellow.500))] h-40 w-40">

Otherwise, you could look at creating your own plugin that creates via2- dynamic class utilities, though you would need to juggle the CSS variables that Tailwind uses internally to generate the gradient from the existing from-, via-, and to- classes.