tailwind“list-none”在 safari 中不起作用

Question

我目前正在使用 astro 和 tailwind 制作我的页面。

我有一个“详细信息”组件，但是当我尝试删除默认情况下出现的箭头时，我会这样做。

<details>
  <summary class="list-none flex w-full gap-2.5 cursor-pointer">
    <p></p> 
  </summary>
  <p></p>
</details>

在 Google Chrome 中它工作正常，但是当我在 Safari 中打开页面时，它没有被应用。

我一直在safari里看inspector，没看出什么奇怪的地方，风格应用得很好。

我也尝试过用纯CSS写样式，但还是不行。

我不知道我做错了什么

Answer 1

需要明确的是，

list-none

正在 Safari 中运行。问题是您需要使用非标准 CSS 伪选择器来删除箭头。像这样更新你的 Tailwind CSS 文件：

/* tailwind.css file */
@tailwind base;
@tailwind components;
@tailwind utilities;

details summary::-webkit-details-marker {
  display: none;
}

这是一个工作示例。