CSS Variable as an Arbitrary Value

Here's how you can create, update, and scope a CSS variable as an arbitrary value in Tailwind CSS:

<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
  <!-- ... -->
</div>