如何仅使用 TailwindCSS 实用程序类获取彩色项目符号列表点

Question

我想知道是否有一种策略可以仅使用 Tailwind 实用程序类而不编写任何 CSS 行来获取彩色项目符号列表点。
我花了一些时间进行搜索，但尚未找到任何解决方案。

这是我目前正在处理的清单。

<ul class='list-outside list-disc ml-6'>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
  <li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
  <li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

Answer 1

只需添加marker:text-color，color您想要的颜色在哪里：

<ul class='marker:text-green list-outside list-disc ml-6'>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.</li>
  <li> Nunc nec gravida enim. Vestibulum venenatis luctus sem.</li>
  <li> Proin fringilla vel nulla eu molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>

Answer 2

您必须像这样指定它才能获得彩色项目符号列表。

<li class="text-red-500">
  <div class="text-black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.
  </div>
</li>

Answer 3

我是这样解决的：

<ul class='list-outside list-disc ml-6'>
    <li class="text-red-500">
        <span class="text-black">Lorem ipsum dolor</span>
    </li>
    <li class="text-red-500">
        <span class="text-black">Nunc nec gravida enim.</span>
    </li>
</ul>