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

Posted 2023-03-06

【中文标题】如何仅使用 TailwindCSS 实用程序类获取彩色项目符号列表点

【英文标题】：How to get colored bullet list dots just using TailwindCSS utility classes

【发布时间】：2021-07-03 02:32:14

【问题描述】：

我想知道是否有一种策略可以仅使用 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>

【参考方案1】：

此处的小众答案，但对于那些希望在 React 组件的 innerhtml 中实现此目的的人，您可以专门针对 li 元素：

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

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

这个答案是一个近似值，取决于框架。如果您在 React 中使用 Tailwind，您可能已经熟悉“取消重置”您的基本样式。此解决方案适用于已完成此操作的人。

更多here和here。

【参考方案2】：

只需添加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>

【讨论】：

谢谢！这与排版和 daisyui 插件配合得很好

【参考方案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>

【参考方案4】：

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

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