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 theurl('...')wrapper so the class attribute's double quotes remain intact.
Converta vetores SVG em CSS limpo em segundos.
Gere Data URIs codificadas em URL, background-image, mask-image e classes Tailwind diretamente no navegador. Sem uploads, zero latência.
Abrir Área de Trabalho