Astro+Tailwind开发中list-none在Safari不生效的问题

问题核心是Safari对<summary>默认箭头的渲染逻辑和Chrome不一样：Chrome用list-style控制箭头，所以list-none能生效，但Safari的箭头是通过-webkit-details-marker伪元素实现的，同时元素本身带有-webkit-appearance属性，光加list-none没用。

解决步骤 #

方法1：组件内添加自定义样式（Astro中直接用） #

在你的Astro组件里，给summary加一个自定义类，同时补充针对Safari的样式：

<details>
  <summary class="list-none flex w-full gap-2.5 cursor-pointer no-summary-arrow">
    <p>你的标题内容</p> 
  </summary>
  <p>展开后的内容</p>
</details>

<style>
.no-summary-arrow::-webkit-details-marker {
  display: none; /* 隐藏Safari的箭头伪元素 */
}
.no-summary-arrow {
  -webkit-appearance: none; /* 重置Safari的默认外观 */
  appearance: none; /* 兼容标准属性 */
}
</style>

方法2：集成到Tailwind自定义工具类（全局生效） #

如果多个组件需要用到，推荐在tailwind.config.js里添加自定义工具类，这样可以直接用Tailwind类名调用：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
  utilities: {
    ".no-summary-arrow": {
      "-webkit-appearance": "none",
      "appearance": "none",
      "&::-webkit-details-marker": {
        "display": "none",
      },
    },
  },
}

之后直接在summary上用no-summary-arrow类即可，和你原来的类叠加：

<summary class="list-none flex w-full gap-2.5 cursor-pointer no-summary-arrow">

验证效果 #

添加完样式后，刷新Safari页面，默认箭头就会被移除。这时候再看开发者工具，这些针对Safari的样式会生效，覆盖默认的箭头渲染逻辑。

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