css Question posted in
Some basic documentation can be found here.

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    The error occurs because the inline SVG contains special characters that need to be properly escaped when used in a data:image/svg+xml URL inside your Tailwind CSS configuration. Here’s how you can fix it:

    Step 1: Define Background in tailwind.config.js
    Properly escape the special characters in your SVG string. For example:

    module.exports = {
 theme: {
  extend: {
   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")`,
      },
    },
  },
};

    Step 2: Use the Class in HTML
    You can apply the bg-hero class directly in your HTML or components:

    <div class="bg-hero bg-cover h-screen"></div>

    Step 3: Using @apply in CSS
    If you’re applying it in your CSS, make sure your custom class is defined like this:

    .fill-grain {
  @apply bg-hero bg-cover;
}

    Common Pitfalls
    Escaping Special Characters: Characters like <, >, %, and # must be escaped:

    • < → %3C
    • > → %3E
    • # → %23
    • % → %25

    Quotes: Use single quotes (‘) inside the SVG and double quotes (") around the entire url().

    Why This Happens

    • Tailwind processes your CSS and encounters unescaped characters (like < and #), which are invalid in CSS syntax.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search