带顺风的<mark>文本

Question

我正在建立我的第一个基于Tailwindcss的网站。我想修改<mark>标签，使标记的文本看起来更漂亮。

这是我所做的：

mark {
    @apply inline-block pr-1 pl-1 py-0;
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}

.mark-rounded {
    @apply rounded-sm shadow-md;
}

.mark-teal {
    @apply bg-teal-500  text-white;
}

现在的问题是，如果文本超过几行，所选内容就会变成一个大方框。

还存在行间距因选择而增加的问题。有<mark>-tag的行被“推开”，没有<mark>-tag的行更紧密地聚集在一起。

全尺寸

​

​

小尺寸

​

​

xsmall大小

​

​

我的问题是

有没有更好的(通用的)方式来用顺风设计<mark>-tags的样式？

Answer 1

您将<mark>标记设置为内联块元素是一个错误。将它设置为display: inline (它应该是什么)，一切都很好。