Tailwind css - “list-disc”没有正确设置 <li> 项目符号（双项目符号）

Posted 2023-03-07

【中文标题】Tailwind css - “list-disc”没有正确设置 <li> 项目符号（双项目符号）

【英文标题】：Tailswind css - "list-disc" is not styling <li> bullets correctly (double bullet symbols)

【发布时间】：2021-08-20 05:22:42

【问题描述】：

如何使用 list-disc 类来设置项目符号样式，使用 Tailwindscss？

我的 package.json 包括：

    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/line-clamp": "^0.2.0",
    "@tailwindcss/typography": "^0.4.0",
    "tailwindcss": "^2.1.1",
    "tailwindcss-stimulus-components": "^2.1.2",

我尝试使用 <ul class="list-disc"> 不带和不带 /typography 插件的 class="prose"，它们看起来不同，但都不像预期的那样，Firefox 和 Chrome 看起来一样：

如果没有带有 class="prose" 的容器（列表 1），项目符号完全没有样式，没有缩进，并显示浏览器默认项目符号点。

使用 class="prose" 容器（清单 2）确实创建了一个悬挂缩进，并且一个更轻的项目符号点但也有浏览器默认项目符号点（所以双项目符号）：

这是创建该视图的 html：

  <div class="container mx-auto m-4">
    <h3>List 1</h3>
    <div>
       <ul class="list-disc">
        <li>Bullet one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence.</li>
        <li>Shorter second sentence. </li>
      </ul>
    </div>

    <h3>List 2</h3>
    <div class="prose">
      <ul class="list-disc">
        <li>Bullet one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence,  one long sentence.</li>
        <li>Shorter second sentence. </li>
      </ul>
    </div>
  </div>

我是 Tailwindcss 的新手，所以我可能错过了一些“重置”默认项目符号的父元素？

可能的罪魁祸首：罪魁祸首是容器 div 中的 m-4 类，添加边距会暴露一个悬垂在屏幕外的浏览器默认项目符号，除非有任何填充或边距，在这种情况下它不再关闭-屏幕。

【问题讨论】：

play.tailwindcss.com/8dgGwBhAOU?file=config 你可以看到我添加了所有插件但没有添加刺激，你可以检查它是否没有添加一些额外的样式

太酷了，我没想到你能做到。

【参考方案1】：

Tailwind 的 Preflight reset 将列表重置为 unstyled by default。如果没有 list-disc 或 list-decimal 实用程序类，列表将没有项目符号或数字。使用list-disc/list-decimal 设置list-style-type property，它将::marker 伪元素设置为项目符号、数字或其他内容。这是您在第一个示例中看到的行为。项目符号是浏览器的默认项目符号。

使用 Tailwind 排版时，您不需要在内容中使用实用程序类，如果这样做，您可能会遇到样式/特性冲突的意外问题。在 Tailwind 排版中，列表为 styled by default。但是，排版插件不会将::marker 伪元素设置为list-style-type。相反，它使用::before 伪元素，可以更好地控制子弹的外观。

当使用 Tailwind Typography 和 list-disc 实用程序时，这两种方法不会冲突，因为它们做不同的事情，所以都会显示。较深的子弹很可能是list-disc 设置的::marker 伪元素，而较浅的灰色子弹是Tailwind Typography 设置的::before 伪元素。尝试使用浏览器的 DevTools 查看伪元素，并尝试设置哪些属性以及它们如何影响外观。

为避免这种重复行为，只需从列表中删除 list-disc 类即可。如果您需要自定义 Tailwind 字体样式，请参阅文档中的 Customization 部分。您也可以poke around in the source查看默认样式是如何设置的。

【讨论】：

在使用排版插件时似乎无法设置 ::before 伪样式？