htmlcsstailwind-csszola

tailwindcss highlighting current item in navbar

Im trying to highlight item with TailwindCSS and Zola i found this target tag but it doesnt looks its working. Here is my example code:

<main>
      <div id="blog" class="target:text-pink-700">
        TEST
      </div>
        <div>
          {% block content %} {% endblock %}
        </div>
        

</main>

But it doesnt seems to work: enter image description here

I want to use it to highlight current item in navbar. For now default example from flowbite docs only highlighting first item. How can i achive changing of highlight to current item? Am i trying to achive it correctly with that "target" tag? Any other better approach of solving this problem without javascript?

Solution

  • Tailwind class target: will add styles to CSS pseudo-class :target. Its styles will be applied if current element ID matches current active target from URL (part after #).

    For example, text will be pink in <div id="blog" class="target:text-pink-700"> if URL contains target to this element: 127.0.0.1:1111/blog#blog.

    Some info and examples of :target pseudo-class at developer.mozilla.org

    If you want to apply styles to an active item in a menu with links to different pages (/block, /about, ...) it's better to choose another solution. Compare current URL and links with Zola methods add classes to active menu link. Example from an zola template.

    Tailwind can't do it. And Flowbite simply adds different classes to the first element to make it stand out.