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

【问题标题】：How in tailwindcss to implement data listing with badges如何在tailwindcss中实现带有徽章的数据列表
【发布时间】：2021-02-15 16:39:36
【问题描述】：

我如何在 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>

请链接到示例...

谢谢！

【问题讨论】：

这里归结为 CSS，所以没有关于如何在 tailwindcss 中制作的答案。您几乎可以反映样式，但这取决于您希望它的外观。 Bootstrap 和 Tailwind 不像 fetch 和 axios 转座工具。

标签： tailwind-css

【解决方案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>

【讨论】：