Tailwind CSS 列表类型

在 Tailwind CSS 中，列表类型是通过 list-disc 和 list-decimal 这两个类来控制的。其中，list-disc 用于实现带有实心圆点的无序列表，list-decimal 用于实现有序列表。

实心圆点无序列表

要创建一个实现圆点无序列表，可以添加 list-disc 类到一个 ul 元素上：

<ul class="list-disc">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

这会为列表项添加实心圆点，同时还会设置一些默认的内边距和外边距。

数字有序列表

要创建一个带有数字序号的有序列表，可以添加 list-decimal 类：

<ol class="list-decimal">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ol>

这会为列表项添加数字序号，同时还会设置一些默认的内边距和外边距。

自定义列表符号

除了默认的实心圆点和数字序号外，可以通过添加 list-none 类来移除这些默认样式，然后手动添加自定义的符号。例如，下面的代码会创建一个使用“✓”符号作为列表项符号的无序列表：

<ul class="list-none">
  <li class="flex items-center">
    <span class="text-green-500 mr-2">✓</span> 列表项 1
  </li>
  <li class="flex items-center">
    <span class="text-green-500 mr-2">✓</span> 列表项 2
  </li>
  <li class="flex items-center">
    <span class="text-green-500 mr-2">✓</span> 列表项 3
  </li>
</ul>

这会创建一个无序列表，其中每个列表项都包含一个绿色的“✓”符号和文本。需要注意的是，在这个例子中，我们还使用了 flex 和 items-center 类来将符号和文本分别水平和垂直居中。

总结

这些是 Tailwind CSS 中可用的列表类型。通过使用 list-disc 和 list-decimal 类，可以快速创建标准的带有实心圆点或数字序号的列表，而使用 list-none 类可以使您更自由地自定义列表项符号。