Search code examples
javascriptcssnext.jssvgtailwind-css

How to render inline svg element with TailwindCSS

I've defined a background image in tailwind.config.ts called hero:

backgroundImage: {
        hero: `url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E')`,
},

I tried using it in global.css like this:

.fill-grain {
    @apply before:bg-hero;
}

But it throws an error saying Failed to compile:

failed-to-compile-sc

How can I use an inline svg with TailwindCSS?

Solution

  • The problem seems to be coming from the way you are passing the url string inside of the template string in the config. Precisely, the url, or in this case the svg data, should be put between DOUBLE quotes. It now works for me with this code :

    backgroundImage: {
        hero: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E")`,
},

    According to w3, any type of quotes work (and quotes are even optional), but in this particular case, double quotes are needed and won’t conflict with other quotes in the url string.