How to style SVG <linearGradient> with Tailwind CSS when using `fill="url(#a)"`?

Question

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:

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?

Answer 1

You can also create variables from your tailwind.config.js that you can use in your SVG.

Here is an example of how to do it inside a Laravel 8 project.

tailwind.config.js

const colors = require('tailwindcss/colors');

module.exports = {
    theme: {
        colors: {
            blue: {
                300: colors.blue[300],
                500: colors.blue[500],
            },
            ...

resources/css/variables.css

:root {
    --color-blue-300: theme('colors.blue.300');
    --color-blue-500: theme('colors.blue.500');
}

resources/css/app.css

@import './variables.css';

@import 'tailwindcss/base';
...

resources/views/svg/my-svg.blade.php

...
<defs>
    <linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:var(--color-blue-300);" />
        <stop offset="100%" style="stop-color:var(--color-blue-500);" />
    </linearGradient>
</defs>
...
<path style="fill: url(#grad1);" ...

Then, i'm using in another view (ex: my-layout.blade.php) @include("svg.my-svg"). Using this instead of <img src="my-svg.svg"... allow tailwind's classes to impact the svg.

If you really want to use <img>, a concept is to use controller to build your svg and return a view with response(..., 200)->header('Content-Type', 'image/svg+xml');. I did something like that where i set the color in the url <img src="my-svg.svg?fill=blue-500"... (and it work successfully with tinyMCE 6 which disallow the usage of svg)

Answer 2

To style the linearGradient colors you can use the stop-color attribute on the <stop> elements.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<svg class="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%" stop-color="currentColor" />
        <stop stop-opacity="0" offset="100%" stop-color="white" />
      </linearGradient>
    </defs>
    <circle stroke="currentColor" fill="url(#a)" cx="8.5" cy="8.5" r="6" fill-rule="evenodd" fill-opacity=".8" />
</svg>