首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用TailwindCSS实用程序类获取着色的项目列表点

如何使用TailwindCSS实用程序类获取着色的项目列表点
EN

Stack Overflow用户
提问于 2021-04-07 09:36:30
回答 4查看 10.7K关注 0票数 6

我想知道是否有一种策略,只使用Tailwind实用工具类,而不编写任何CSS行,就可以得到彩色的子弹列表点。

我花了一些时间在寻找,但我还没有找到任何解决办法。

这是我目前正在做的清单。

代码语言:javascript
运行
复制
<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>
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2021-04-07 13:25:52

您必须像这样指定它才能实现彩色的项目列表。

代码语言:javascript
运行
复制
<li class="text-red-500">
  <div class="text-black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin convallis viverra.
  </div>
</li>
票数 7
EN

Stack Overflow用户

发布于 2021-12-19 21:34:37

只需添加marker:text-color,其中color是您想要的颜色:

代码语言:javascript
运行
复制
<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>
票数 20
EN

Stack Overflow用户

发布于 2021-04-07 14:18:18

我就这样解决了:

代码语言:javascript
运行
复制
<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>
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66983358

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档