Styling SVG Gradients Using Tailwind

[anishwij]

Haven't found much information online around how we could use tailwind to style gradients within SVGs. Thought I'd request this as a feature or maybe to see a plugin down the line. Here is the code for reference on how I implemented the functionality (definitely specific to my case at the moment)

const JaggedSideTest = ({ gradientRotation = 0, className, ...props }) => {
  const gradientId = useId()
  const viewBox = [0, 0, 768, 1018]

  return (
    <svg
      width='100%'
      height='100%'
      viewBox={`0 0 ${viewBox[2]} ${viewBox[3]}`}
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
      className={cn('!bg-opacity-0', className)}
      {...props}
    >
      <path
        d='M164.533 351.09L186.182 0H768V1018H0L104.457 607.059L121.235 617.747L255.459 49.2564L233.81 40.6131L164.533 351.09Z'
        fill={`url(#${gradientId})`}
      />
      <defs>
        <linearGradient
          gradientTransform={`rotate(${gradientRotation}, 192, 509)`}
          id={`${gradientId}`}
          x1={viewBox[0]}
          y1={viewBox[1]}
          x2={viewBox[2]}
          y2={viewBox[3]}
          gradientUnits='userSpaceOnUse'
        >
          <stop stopColor='var(--tw-gradient-from)' />
          <stop offset='1' stopColor='var(--tw-gradient-to)' />
        </linearGradient>
      </defs>
    </svg>
  )
}

const Comp = () => {
  return <JaggedSideTest className='absolute h-1/2 w-fit from-blue-500 to-red-500' gradientRotation={0} />
}