Search code examples
csssafaritailwind-css

tailwind "list-none" not working in safari

I am currently making my page using astro and tailwind.

I have a component which is "Details" but when I try to remove the arrow that comes by default I do it like this.

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

In Google Chrome it is working fine, but when I open the page in Safari, it is not being applied.

I've been looking at the inspector in safari, but I don't see anything strange, the style is applied well.

I also tried writing the style with pure CSS, but it still doesn't work.

I do not know what I'm doing wrong

Solution

  • To be clear, list-none is working in Safari. The issue is that you need to use a non-standard CSS pseudo-selector to remove the arrow. Update your Tailwind CSS file like so:

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

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

    Here is a working example.