0

使用 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 中的类，添加边距会暴露一个在屏幕外悬挂的浏览器默认项目符号，除非有任何填充或边距，在这种情况下它不再在屏幕外。

4

1 回答 1

4

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

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

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

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

于 2021-06-02T08:16:18.747 回答