使用 tailwindcss 设置订单列表编号的样式

Question

美好的一天，我试图使用 tailwindcss 设计一个 ol 列表号码，但似乎做不到，我通过谷歌进行了研究，但没有运气。感谢您的帮助。

该框架与 vanilla css 不同，我似乎找不到与 tailwindcss 相同的语法，因为它在 vanilla css 上

Answer 1

要在 Tailwind 中设置有序列表的样式，您需要对元素应用一些列表实用程序ol，并使用marker:要设置样式的项目的状态。

首先，如果您创建有序列表，则数字将不可见。要显示数字，我们需要将这两个实用程序应用于容器ol：

<ol class="list-decimal list-inside">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

这样，我们就得到了一个没有任何样式的常规有序项目列表：

如果您想设置特定li元素的样式，请使用marker:状态。marker:您可以在特定li元素上使用状态，也可以在该元素上ol使用样式来将样式应用于列表中的所有项目。

marker:您可以在文档中阅读有关状态的更多信息。

在下面的示例中，我们ol通过应用将元素的文本颜色设置为蓝色marker:text-blue-700。然后，我们使用将第一个元素的文本设置li为红色marker:text-red-700。这样，我们得到以下信息：

<ol class="list-decimal list-inside marker:text-blue-700">
  <li class="marker:text-red-700">One</li>
  <li>Two</li>
  <li>Three</li>
</ol>