How to get colored bullet list dots just using tailwindcss utility classes

在使用TailwindCSS时，要给列表元素添加项目符号（即列表的点），我们可以使用一些基本的TailwindCSS实用类来实现。以下是一个简单的步骤，展示如何操作：

1. 首先，确保你的项目中已经安装并配置了TailwindCSS。
2. 接下来，使用list-disc类来为<ul>或<ol>元素添加项目符号。
3. 然后，使用list-inside类来设置列表的样式为内部，这样项目符号会显示在列表项内容的内侧，或者使用list-outside来使项目符号显示在外侧。
4. 最后，根据需要对列表项进行样式调整，比如使用p-, m-, text-等实用类来添加内边距、外边距或设置文本大小等。

下面是一个具体的例子：

html
<ul class="list-disc list-inside m-4 p-2">
  <li class="mb-2 text-blue-600">第一项</li>
  <li class="mb-2 text-green-600">第二项</li>
  <li class="text-red-600">第三项</li>
</ul>

以上代码说明：

• list-disc 类会给每个 <li> 元素前面添加一个圆点作为项目符号。
• list-inside 类将项目符号放置在内容的内侧。
• m-4 类在整个 <ul> 元素上添加外边距。
• p-2 类在整个 <ul> 元素上添加内边距。
• mb-2 类在每个 <li> 元素的底部添加外边距，除了最后一个。
• text- 类用来设置不同的文字颜色。

通过这些步骤，你就可以仅使用TailwindCSS的实用类来获得列表元素的点，并且对其样式进行定制。

Just add marker:text-color, where color is the color you want:

shell
<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>

You will have to specify it like this to achieve a colored bullet list.

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

I solved it like this:

shell
<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>

Niche answer here, but for those wanting to achieve this in innerHTML in a React component, you can target the li element specifically with:

shell
.your-class {
  li::marker {
    @apply text-sky;
  }
}


<div className='your-class' dangerouslySetInnerHTML={{__html: yourContent}}/>

This answer is an approximation and depends on framework. If you're using Tailwind in React you may already be familiar with 'unresetting' your your base styles. This solution is for those who have done this.

More here and here.

This worked May 2023 (in the li class):

shell
<ul><li class="list-disc marker:text-red-800">text for this bullet point goes here</li></ul>

or, in the ul class (applies to all discs in the ul):

shell
<ul class="marker:text-indigo-900"><li class="list-disc ">text for this bullet point goes here</li></ul>