How to style SVG tags linearGradient the Tailwind way when using fill="url(#a)"?

[deadcoder0904]

I have seen @adamwathan's live streams & he does className="w-5 h-5 text-white" fill="currentColor" to style an SVG through Tailwind.

How can I do the same for linearGradient?

I have the following SVG:

// original: https://www.sketch.com/images/icons/mac/monochrome/17x17/circle.gradient.linear.svg

import React from 'react'

export const LinearGradient = () => (
	<svg className="w-5 h-5" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
		<defs>
			<linearGradient x1="50%" y1="92.034%" x2="50%" y2="7.2%" id="a">
				<stop offset="0%" />
				<stop stopOpacity="0" offset="100%" />
			</linearGradient>
		</defs>
		<circle
			className="text-white"
			stroke="currentColor"
			fill="url(#a)"
			cx="8.5"
			cy="8.5"
			r="6"
			fillRule="evenodd"
			fillOpacity=".8"
		/>
	</svg>
)

How do I style linearGradient in SVG that uses fill="url(#a)" perfectly? I can't change fill="currentColor" as it will lose reference to id="a".

The original SVG is at https://www.sketch.com/images/icons/mac/monochrome/17x17/circle.gradient.linear.svg

Any solutions?

[deadcoder0904]

Ha someone answered on StackOverflow :)

To style the linearGradient colors I had to use the stopColor attribute on the <stop> elements.

<svg
	className="w-32 h-32 text-blue-500"
	viewBox="0 0 17 17"
	xmlns="http://www.w3.org/2000/svg"
>
	<defs>
		<linearGradient x1="50%" y1="92.034%" x2="50%" y2="7.2%" id="a">
			<stop offset="0%" stopColor="currentColor" />
			<stop stopOpacity={0} offset="100%" stopColor="#fff" />
		</linearGradient>
	</defs>
	<circle
		stroke="currentColor"
		fill="url(#a)"
		cx={8.5}
		cy={8.5}
		r={6}
		fillRule="evenodd"
		fillOpacity={0.8}
	/>
</svg>