Tailwind：组合 2 styles 用于文本装饰行

Question

我希望一定范围的文本同时具有删除线和下划线。 这在香草 CSS 中是可能的，例如：

text-decoration-line: underline line-through;

我假设如果我使用 class 之类的顺风它会类似地工作

class="underline line-through"

但它不起作用。 styles 一次只能申请一个。 有什么办法可以通过顺风课程获得这种行为吗？

Answer 1

现在这些utilities不可组合，您可以创建自己的plugin ，或使用arbitrary properties来实现您想要的结果：

<div class="[text-decoration:underline_line-through]">hello</div>

这是一个带有解决方案的快速游乐场链接： https://play.tailwindcss.com/baW2CzoBur

Answer 2

是的，您可以使用 Tailwind CSS 中的文本装饰实用程序将删除线和下划线 styles 应用于一段文本。

为此，您可以使用以下 class：

.text-decoration-underline-line-through {
  text-decoration: underline line-through;
}

然后，您可以将此 class 应用于您的 span 元素，如下所示：

<span class="text-decoration-underline-line-through">This text has both strike-throughs and underlines</span>

或者，您也可以使用带有下划线和划线值的 text-decoration-line 实用程序来获得相同的结果：

.text-decoration-line-underline-line-through {
  text-decoration-line: underline line-through;
}

<span class="text-decoration-line-underline-line-through">This text has both strike-throughs and underlines</span>