如何在 tailwindcss 中实现带徽章的数据列表

Question

我如何在 tailwindcss 中实现带有徽章的数据列表，就像我在 bootstrap 中所做的那样：

<ul class="list-group m-0 p-1">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Number of ads
        <span class="badge badge-primary badge-pill">
            <span id="span_adsCount" style="font-weight: bold"></span>
        </span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Active ads
        <span class="badge badge-primary badge-pill">
            <span id="span_activeAdsCount" style="font-weight: bold"></span>
        </span>
    </li>
</ul>

请link举个例子...

谢谢！

Answer 1

我创建了一个Tailwind Play working example。

尽管如此，我强烈建议您完成 Tailwind Docs。它们是不言自明的。

<ul class="w-48 divide-y-2 divide-gray-200">
  <li class="flex justify-between items-center space-x-2 py-2 px-4 bg-gray-100 whitespace-nowrap rounded">
    <div>
      Number of ads
    </div>
    <div class="h-6 w-6 rounded-full bg-blue-600 flex justify-center items-center text-blue-50">
      2
    </div>
  </li>
  <li class="flex justify-between items-center space-x-2 py-2 px-4 bg-gray-100 whitespace-nowrap rounded">
    <div>
      Active ads
    </div>
    <div class="h-6 w-6 rounded-full bg-blue-600 flex justify-center items-center text-blue-50">
      4
    </div>
  </li>
    <li class="flex justify-between items-center space-x-2 py-2 px-4 bg-gray-100 whitespace-nowrap rounded">
    <div>
      Expired ads
    </div>
    <div class="h-6 w-6 rounded-full bg-blue-600 flex justify-center items-center text-blue-50">
      1
    </div>
  </li>
</ul>

如何在 tailwindcss 中实现带徽章的数据列表

How in tailwindcss to implement data listing with badges

tailwind-css