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

Viewed 1420

I'm trying to avoid having underlines under my <a> tags. I have added the class "no-underline" as per the docs but I'm still getting the underlines under my links? I have added the code im using below:

<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!

1 Answers

Add no-underline in to

<div class="m-auto">

And make sure that there are no underline class in the parent divs.

You can also try to add

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

into the divs tag if those doesn't work.

Related