Tailwind Label

label

标签可插入到任何位置，也可结束按钮一起使用。默认标签采用圆角，可设置圆角尺寸。

基础样式

<span class="inline-block mr-1 last:mr-0 py-1 px-2 rounded bg-gray-200 text-xs font-semibold text-gray-600 uppercase">
  label
</span>

样式	属性	描述
inline-block	display:inline-block;	转化为行内块级元素
mr-1 last:mr-0	margin-right:.25rem;	右侧外间距为0.25rem，最后一个元素的右侧外间距为0.
py-1 px-2	padding:.25rem .5rem;	内间距左右是上下的2倍
rounded	border-radius:1rem;	圆角边框设置为0.25rem
bg-gray-200	background-color	背景色，注意背景色与字体颜色相差4个等级
text-xs font-semibold text-gray-600 uppercase	text	文本字体样式设置

椭圆标签

椭圆标签只需要在默认圆角标签的基础上将rounded设置为rounded-full即可

<span class="inline-block mr-1 last:mr-0 py-1 px-2 rounded-full bg-gray-200 text-xs font-semibold text-gray-600 uppercase">
  label
</span>

按钮标签

button label

<button class="px-4 py-2 mr-1 mb-1 bg-red-500 outline-none rounded shadow text-white text-xs font-bold uppercase focus:outline-none hover:shadow-md active:bg-gray-600">
    Button
    <span class="inline-block mr-1 last:mr-0 py-1 px-2 rounded-full bg-gray-200 text-xs font-semibold text-gray-600 uppercase">
      0
    </span>
</button>

源码地址

https://codepen.io/junchow/pen/wvKVqEY?editors=1000