SVG <linearGradient/> issue using Tailwind?

Question

Here is my code. I got problem with linear gradient styling. It doesn't react on stroke-[url(#GradientColor)] in className of Progress circle and colors are not applied. Maybe there is another syntax or some other issues? Or maybe some problems in tailwind config?

The main idea is to make circle progress bar with gradient using tailwind. Without 'linearGradient' everything works fine so I think problem is in tailwind config file. Because when I wrote the similar code using just css and put it before the tailwind config execution it's also works fine.

Part of tailwind.config.cjs:

module.exports = {
  theme: {
    extend: {
      stroke: {
        gradient: 'url(#GradientColor)',
      },
    },
  },
};

Main code:

import { FC } from 'react'

interface Props {
  strokeWidth?: number
  sqSize?: number
  percentage: number
}

const CircularProgressBar: FC<Props> = ({
  strokeWidth = 8,
  sqSize = 160,
  percentage,
}) => {
  const radius = (sqSize - strokeWidth) / 2
  const viewBox = `0 0 ${sqSize} ${sqSize}`
  const dashArray = radius * Math.PI * 2
  const dashOffset = dashArray - (dashArray * (percentage || 0)) / 100

  return (
    <svg width={sqSize} height={sqSize} viewBox={viewBox}>
      {/* Gradient Definition */}
      <defs>
        <linearGradient id="GradientColor" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="red" />
          <stop offset="100%" stopColor="blue" />
        </linearGradient>
      </defs>
      {/* Background Circle */}
      <circle
        className="fill-none stroke-gray-200"
        cx={sqSize / 2}
        cy={sqSize / 2}
        r={radius}
        strokeWidth={strokeWidth}
      />
      {/* Progress Circle */}
      <circle
        className="fill-none stroke-[url(#GradientColor)] transition-all ease-in"
        cx={sqSize / 2}
        cy={sqSize / 2}
        r={radius}
        strokeLinecap="round"
        strokeWidth={strokeWidth}
        transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}
        style={{
          strokeDasharray: dashArray,
          strokeDashoffset: dashOffset,
        }}
      />
      {/* Percentage Text */}
      <text
        x="50%"
        y="50%"
        dy=".3em"
        textAnchor="middle"
        className="fill-slate-700 text-3xl font-semibold"
      >
        {percentage}%
      </text>
    </svg>
  )
}

export default CircularProgressBar