<div class="grid gap-6">

    <div class="grid gap-2">
        <h2 class="text-lg"><strong>Custom class name</strong></h2>
        <p>class: <strong>custom-class</strong></p>
        <p>usecase: utility class usecase description</p>
    </div>

</div>
<div class="grid gap-6">
{% for util in utils %}
    <div class="grid gap-2">
        <h2 class="text-lg"><strong>{{ util.name }}</strong></h2>
        <p>class: <strong>{{ util.class }}</strong></p>
        <p>usecase: {{ util.usecase }}</p>
    </div>
{% endfor %}
</div>
{
  "utils": [
    {
      "name": "Custom class name",
      "class": "custom-class",
      "usecase": "utility class usecase description"
    }
  ]
}

Custom Tailwind utilities