Search code examples
tailwind-css

How can I add more than 3 stops for Tailwind gradient

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?

Solution

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