Whitespace in Arbitrary Values

When an arbitrary value needs to contain a space, use an underscore (_) instead and Tailwind will automatically convert it to a space at build-time:

<div class="grid grid-cols-[1fr_500px_2fr]">
  <!-- ... -->
</div>

In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:

<div class="bg-[url('/what_a_rush.png')]">
  <!-- ... -->
</div>

In the rare case that you actually need to use an underscore but it's ambiguous because a space is valid as well, escape the underscore with a backslash (\) and Tailwind won't convert it to a space:

<div class="before:content-['hello\_world']">
  <!-- ... -->
</div>

If you're using something like JSX where the backslash is stripped from the rendered HTML, use String.raw()↗ so the backslash isn't treated as a JavaScript escape character:

<div className={String.raw`before:content-['hello\_world']`}>
  {/* ... */}
</div>

From the Tailwind CSS↗ docs.