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.