Tailswind css - “list-disc”未正确设置 <li> 项目符号的样式（双项目符号）

Question

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

我的 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 看起来相同：

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

使用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 相当陌生，所以我可能错过了一些“重置”默认项目符号的父元素？

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

Answer 1

作为解决方案，您可以在 ol 或 ul 标记中添加这两个类

<ul class="list-disc list-inside">
            ...
            <li>...<li>
            ...
</ul>

希望这对你有用。

Answer 2

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

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

当使用 Tailwind Typography 和list-disc实用程序时，这两种方法不会冲突，因为它们执行不同的操作，因此都会显示。较深的项目符号可能是::marker由 设定的伪元素list-disc，而较浅的灰色项目符号是::before由 Tailwind Typography 设置的伪元素。尝试使用浏览器的开发工具来查看伪元素，并尝试设置哪些属性以及它们如何影响外观。

为了避免这种重复行为，只需list-disc从列表中删除该类即可。如果您需要自定义 Tailwind Typography 样式，请参阅文档中的自定义部分。您还可以浏览源代码以查看如何设置默认样式。

Answer 3

默认情况下，Tailwind 会将 的左填充设置<ul>为零。这就是默认情况下不显示项目符号的原因。尝试添加pl-5例如，这将解决问题。

<ul class="pl-5 list-disc">
  <li>Item</li>
</ul>