如何使用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>

Answer 4

这里的答案很好，但对于那些想在React组件的innerHTML中实现这一点的人来说，你可以专门针对li元素：

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

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

这个答案是近似的，取决于框架。如果你在React中使用Tailwind，你可能已经熟悉了"取消设置"你的基本风格。这个解决方案是为那些这样做的人准备的。

更多在这里和这里。

Answer 5

2023年5月(在li类中(：

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

或者，在ul类中(适用于ul中的所有光盘(：

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

Answer 6

有多种方法可以做到这一点，下面是其中之一。

在这里，文本颜色将是绿色&列表图标颜色将为橙色

<ul className="marker:text-color list-inside list-disc text-orange-500 [&>li>p]:inline [&>li>p]:text-green-800">
<li>
<p>This is para 1</p>
</li>
<li>
<p>This is para 2</p>
</li>
<li>
<p>This is para 3</p>
</li>
</ul>