为什么Tailwind的list-style-type样式在本地运行不生效？

问题原因 #

Tailwind CSS v2.2.x 版本默认开启的 preflight 基础样式重置会清除所有元素的默认列表样式；同时普通段落标签 <p> 默认是 display: block 属性，仅设置 list-style-type 样式不会渲染列表标记，必须搭配 display: list-item 才会生效。
Tailwind 官方 Playground 做了默认兼容处理，所以线上可以正常运行，本地配置未做适配就会出现效果差异。

解决方案 #

• 方案1：适配标签使用习惯
  如果是做常规列表，优先使用 <ul>/<ol> 标签搭配列表类使用，写法如下：

<ul>
  <li class="list-disc ml-6">列表项内容</li>
</ul>

如果一定要给 <p> 标签设置列表样式，需要同时添加 list-item 类修改元素的display属性：

<p class="list-item list-disc ml-6">带列表标记的段落内容</p>

• 方案2：修改Tailwind配置适配
  如果不想修改标签写法，可以在全局CSS中添加自定义基础规则覆盖preflight的重置逻辑：

@layer base {
  /* 恢复ul/ol默认列表样式 */
  ul, ol {
    list-style: revert;
    margin-left: 1.5em;
  }
  /* 给带列表样式的p标签默认设置display属性 */
  p[class*="list-"] {
    display: list-item;
    margin-left: 1.5em;
  }
}

如果完全不需要preflight的样式重置，也可以直接在tailwind.config.js中关闭对应核心插件：

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

• 方案3：排查Purge配置
  如果上述操作后依然不生效，检查tailwind.config.js中的purge配置是否覆盖到了你写代码的文件路径，临时关闭purge测试效果，如果关闭后生效就是内容扫描路径配置错误，修正路径即可。

内容的提问来源于stack exchange，提问作者Fayakon