Using Inline SVG in Tailwind CSS Arbitrary Values

Tailwind CSS allows developers to apply arbitrary values using square bracket notation. You can embed entire URL-encoded vector graphics directly inside class names without writing custom CSS rules.

1. The Arbitrary Background Class Syntax

In Tailwind CSS, arbitrary values must not contain unescaped whitespace. Spaces between XML attributes must be replaced with underscores (_):

<!-- Tailwind CSS Arbitrary Vector Background -->
<div class="w-6 h-6 bg-[url('data:image/svg+xml,%3Csvg_xmlns=\'http://www.w3.org/2000/svg\'_viewBox=\'0_0_24_24\'_fill=\'none\'_stroke=\'%2318181b\'_stroke-width=\'2\'%3E%3Cpath_d=\'M20_6L9_17l-5-5\'/%3E%3C/svg%3E')] bg-no-repeat bg-contain bg-center"></div>

2. Tailwind Arbitrary Mask Properties

For icons that adapt to text colors, use Tailwind's arbitrary property syntax with bg-current:

<!-- Tailwind Arbitrary Mask with Dynamic Text Color Inheritance -->
<span class="inline-block w-5 h-5 [mask-image:url('data:image/svg+xml,%3Csvg_xmlns=\'http://www.w3.org/2000/svg\'_viewBox=\'0_0_24_24\'%3E%3Cpath_d=\'M5_12h14\'_stroke=\'%23000\'/%3E%3C/svg%3E')] [mask-size:contain] [mask-repeat:no-repeat] bg-current text-zinc-500 hover:text-zinc-900 transition-colors"></span>

3. Escaping Rules Checklist for Tailwind

• Whitespace: Every space must be converted to an underscore (_).
• Hex Colors: Replace # with %23 (e.g. stroke='%2318181b').
• Quotes: Use single quotes (') inside the url('...') wrapper so the class attribute's double quotes remain intact.