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.
SVGベクターをクリーンなCSSへ瞬時に変換。
URLエンコードされたData URI、background-image、mask-image、Tailwind任意クラスをブラウザ内で直接生成。サーバーへのアップロード不要、ゼロ遅延。
Studio ワークスペースを開く