tailwindcss current page

[kertahayu]

how to achieve this with tailwindcss.

nav link

<nav>
   <a href="/home" class="{{ $current-page ? 'bg-blue-500 is_active' :  'group' }}"> // if this is the current / active page
      <span class="text-blue-200 group-hover:text-white">...<span> // is_active:text-white
   </a>
   <a href="/profile" class="{{ $current-page ? 'bg-blue-500' :  'group' }}">
      <span class="text-blue-200 group-hover:text-white">...<span>
   </a>
</nav>

i still don't want to achieve this with js.

[Nick-Mazuk]

As far as I know, there's "is current link" pseudo-selector. Since Tailwind CSS is a CSS framework, that means this can't be done with Tailwind alone. You'll have to use JavaScript or server-side rendering.

https://stackoverflow.com/questions/2397370/change-link-color-of-the-current-page-with-css

[kertahayu]

thanks for your answer, I've overcome this with a simple trick.

<nav class="text-blue-200"> // so I gave text-color-x as the default
   <a href="/home" class="{{ $current-page ? 'text-white bg-blue-500' :  'group' }}"> // when current-link I give text-white
      <span class="group-hover:text-white">...<span>
   </a>
   <a href="/profile" class="{{ $current-page ? 'text-white bg-blue-500' :  'group' }}">
      <span class="group-hover:text-white">...<span>
   </a>
</nav>