Tailwind css - "list-disc" 没有正确设置 <li> 项目符号的样式（双项目符号）
Tailswind css - "list-disc" is not styling <li> bullets correctly (double bullet symbols)
如何使用 list-disc class 使用 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",
我尝试在不使用和使用 /typography 插件的 class="prose" 的情况下使用 <ul class="list-disc">，它们看起来不同，但都不是预期的那样，而 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 class，添加边距会暴露悬空的 browser-default 子弹 off-screen，除非有任何填充或边距，在这种情况下它不再是 off-screen.
Tailwind 的 Preflight reset resets lists to be unstyled by default. Without a list-disc or list-decimal utility class, lists will have no bullet or numbers. Using the list-disc/list-decimal sets the list-style-type property，它将 ::marker 伪元素设置为项目符号、数字或其他内容。这是您在第一个示例中看到的行为。项目符号是浏览器的默认项目符号。
使用 Tailwind Typography 时，您不需要在内容中使用实用程序 classes，如果这样做，您可能 运行 会遇到与 styles/specificity 冲突的意外问题。在 Tailwind Typography 中，列表是 styled by default。但是，排版插件 不会 将 ::marker 伪元素设置为 list-style-type。相反，它使用 ::before 伪元素，可以更好地控制项目符号的外观。
当使用 Tailwind Typography 和 list-disc 实用程序时，这两种方法不会冲突，因为它们做不同的事情，所以两者都会显示。深色的项目符号可能是由 list-disc 设置的 ::marker 伪元素，而浅灰色的项目符号是由 Tailwind Typography 设置的 ::before 伪元素。尝试使用浏览器的 DevTools 查看伪元素，并尝试设置哪些属性以及它们如何影响外观。
要避免这种重复行为，只需从您的列表中删除 list-disc class。如果您需要自定义 Tailwind Typography 样式，请参阅 Customization section in the docs. You can also poke around in the source 查看默认样式的设置方式。
如何使用 list-disc class 使用 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",
我尝试在不使用和使用 /typography 插件的 class="prose" 的情况下使用 <ul class="list-disc">，它们看起来不同，但都不是预期的那样，而 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 class，添加边距会暴露悬空的 browser-default 子弹 off-screen，除非有任何填充或边距，在这种情况下它不再是 off-screen.
Tailwind 的 Preflight reset resets lists to be unstyled by default. Without a list-disc or list-decimal utility class, lists will have no bullet or numbers. Using the list-disc/list-decimal sets the list-style-type property，它将 ::marker 伪元素设置为项目符号、数字或其他内容。这是您在第一个示例中看到的行为。项目符号是浏览器的默认项目符号。
使用 Tailwind Typography 时，您不需要在内容中使用实用程序 classes，如果这样做，您可能 运行 会遇到与 styles/specificity 冲突的意外问题。在 Tailwind Typography 中，列表是 styled by default。但是，排版插件 不会 将 ::marker 伪元素设置为 list-style-type。相反，它使用 ::before 伪元素，可以更好地控制项目符号的外观。
当使用 Tailwind Typography 和 list-disc 实用程序时，这两种方法不会冲突，因为它们做不同的事情，所以两者都会显示。深色的项目符号可能是由 list-disc 设置的 ::marker 伪元素，而浅灰色的项目符号是由 Tailwind Typography 设置的 ::before 伪元素。尝试使用浏览器的 DevTools 查看伪元素，并尝试设置哪些属性以及它们如何影响外观。
要避免这种重复行为，只需从您的列表中删除 list-disc class。如果您需要自定义 Tailwind Typography 样式，请参阅 Customization section in the docs. You can also poke around in the source 查看默认样式的设置方式。