Tailwind：无下划线 class 不适用于我的 <a> 标签？

Question

我试图避免在我的 <a> 标签下添加下划线。我已经按照文档添加了 class "no-underline" 但我的链接下仍然有下划线？我添加了以下代码：

<div
  class="
    my-3
    flex flex-wrap
    -m-1
    text-center
    justify-center
    items-center
    no-underline
  "
>
  <div class="m-auto">
    {% for tag in tags %}
    <a
      href="{% routablepageurl blog_page 'post_by_tag' tag.slug %}"
      class="no-underline"
    >
      <span
        class="
          font-mono
          m-1
          bg-gray-200
          hover:bg-gray-300
          rounded-full
          px-2
          py-1
          font-bold
          text-sm
          leading-loose
          cursor-pointer
          shadow-lg
          no-underline
        "
        >{{ tag }}</span
      >
    </a>
    {% empty %} No tags yet {% endfor %}
  </div>
</div>

Thanks for the help!

Answer 1

将no-underline加到

<div class="m-auto">

并确保父 div 中没有 underline class。

您也可以尝试添加

style="text-decoration: none !important;"

如果不起作用，则添加到 div 标签中。

Tailwind：无下划线 class 不适用于我的 <a> 标签？

TailwindCC: no-underline class does not work for my <a> tag?

html

css

tailwind-css