The color of active links in TailwindCSS remains unchanged

Question

The color of active links in TailwindCSS remains unchanged

In my project, I am using NextJS along with Tailwind CSS to create a top navigation bar. My goal is to change the text color for active links within the navigation bar. Below is the code snippet I have implemented:

const Header = () => {
    return(
        <header>
            <nav className="sd:max-w-6xl mx-auto">
                <ul className="flex py-2">
                    <li className="mr-auto ml-4">
                        <Link href="/"><a><Image width={80} height={80} src="/images/brand-logo.png" alt="ECT Logo"/></a></Link>
                    </li>
                    <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600">
                        <Link href="/"><a>Home</a></Link>
                    </li>
                    <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600">
                        <Link href="/user/signup"><a>Join</a></Link>
                    </li>
                    <li className="mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-brand-darkblue text-xl active:text-indigo-600">
                        <Link href="/user/login"><a>Login</a></Link>
                    </li> 
                </ul>
        </nav>
        </header>
    )

}

In addition to the code snippet above, I have made modifications in my tailwind.config.css file as follows:

module.exports = {
  #
  variants: {
    extend: {
      textColor: ['active'],
    },
 
}

Despite implementing these changes, the text color does not change for active links as expected. I would appreciate any guidance on what I might be doing wrong in this setup.

javascript html css next.js tailwind-css

Answer 1

Answer №1

There appears to be a confusion between two concepts:

The active state in Tailwind CSS, which pertains to the state of an element while it is being pressed (https://tailwindcss.com/docs/hover-focus-and-other-states#active).
The "active" page, indicating that the current page's path matches the nav item's href.

You cannot achieve concept 2 with concept 1 as they are different entities.

To differentiate and show the current page (concept 2), you must compare the current path with the <Link> element's path and implement conditional Tailwind classes accordingly.

For Next.js Pages Router:

import Link from 'next/link';
import { useRouter } from 'next/router';

export const Header = () => {
  const router = useRouter();

  return (
    <header>
      <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  )
}

Source: https://dev.to/yuridevat/how-to-add-styling-to-an-active-link-in-nextjs-593e

For Next.js App Router (Update March 2024):

'use client';
 
import { usePathname } from 'next/navigation';
 
export const Header = () => {
  const pathname = usePathname();

  return (
    <header>
      <Link href="/">
        <a className={pathname === "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  );
};

This is a sample approach:

import { usePathname } from "next/navigation";

const NAV_ITEMS = [
  { href: "/", label: "Home" },
  { href: "/about", label: "About" },
];

export const Nav = () => {
  const pathname = usePathname();

  return (
    <nav>
      {NAV_ITEMS.map(({ href, label }) => {
        const isActive = pathname === href;

        return (
          <Link
            key={href}
            href={href}
            className={`${isActive ? "text-blue-500" : "text-black"} text-sm`}
          >
            {label}
          </Link>
        );
      })}
    </nav>
  );
};

By using a helper library like classnames, the code can be streamlined:

<Link
  key={href}
  href={href}
  className={classnames("text-sm", {
    "text-blue-500": isActive,
    "text-black": !isActive,
  })}
>
  {label}
</Link>;;

Applying this methodology to your code, you could modify the className as follows:

<Link href="/user/signup">
    <a className={`mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-xl ${router.pathname === "/user/signup" ? "text-indigo-600" : "text-brand-darkblue"}`}>
        Home
    </a>
</Link>

Answer 2

There appears to be a confusion between two concepts:

The active state in Tailwind CSS, which pertains to the state of an element while it is being pressed (https://tailwindcss.com/docs/hover-focus-and-other-states#active).
The "active" page, indicating that the current page's path matches the nav item's href.

You cannot achieve concept 2 with concept 1 as they are different entities.

To differentiate and show the current page (concept 2), you must compare the current path with the <Link> element's path and implement conditional Tailwind classes accordingly.

For Next.js Pages Router:

import Link from 'next/link';
import { useRouter } from 'next/router';

export const Header = () => {
  const router = useRouter();

  return (
    <header>
      <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  )
}

Source: https://dev.to/yuridevat/how-to-add-styling-to-an-active-link-in-nextjs-593e

For Next.js App Router (Update March 2024):

'use client';
 
import { usePathname } from 'next/navigation';
 
export const Header = () => {
  const pathname = usePathname();

  return (
    <header>
      <Link href="/">
        <a className={pathname === "/" ? "active" : ""}>
           Home
        </a>
      </Link>
    </header>
  );
};

This is a sample approach:

import { usePathname } from "next/navigation";

const NAV_ITEMS = [
  { href: "/", label: "Home" },
  { href: "/about", label: "About" },
];

export const Nav = () => {
  const pathname = usePathname();

  return (
    <nav>
      {NAV_ITEMS.map(({ href, label }) => {
        const isActive = pathname === href;

        return (
          <Link
            key={href}
            href={href}
            className={`${isActive ? "text-blue-500" : "text-black"} text-sm`}
          >
            {label}
          </Link>
        );
      })}
    </nav>
  );
};

By using a helper library like classnames, the code can be streamlined:

<Link
  key={href}
  href={href}
  className={classnames("text-sm", {
    "text-blue-500": isActive,
    "text-black": !isActive,
  })}
>
  {label}
</Link>;;

Applying this methodology to your code, you could modify the className as follows:

<Link href="/user/signup">
    <a className={`mr-4 my-auto hover:text-indigo-600 font-normal font-serif text-xl ${router.pathname === "/user/signup" ? "text-indigo-600" : "text-brand-darkblue"}`}>
        Home
    </a>
</Link>

Answer 3

Answer №2

When you utilize NavLink, it automatically adds the active class to the link, however, it does not apply the active state in tailwindcss.

An effective solution is to create a custom variant like the following:

<NavLink to={``} className={'[&.active]:text-indigo-500}>
</NavLink>

This approach leverages the power of tailwindcss with pure CSS, while also preventing unnecessary use of state to avoid potential rendering issues.

Answer 4

When you utilize NavLink, it automatically adds the active class to the link, however, it does not apply the active state in tailwindcss.

An effective solution is to create a custom variant like the following:

<NavLink to={``} className={'[&.active]:text-indigo-500}>
</NavLink>

This approach leverages the power of tailwindcss with pure CSS, while also preventing unnecessary use of state to avoid potential rendering issues.

Answer 5

Answer №3

To ensure the current URL is matched correctly, it is recommended to utilize NavLink instead of Link. Below is an example I have implemented:

<NavLink to={`/${link.name}`}  className={ ({isActive})=>  (" capitalize my-2 flex flex-col ") + (isActive?ActiveLink:NormalLink) }>
              {link.name}
  </NavLink>

Answer 6

To ensure the current URL is matched correctly, it is recommended to utilize NavLink instead of Link. Below is an example I have implemented:

<NavLink to={`/${link.name}`}  className={ ({isActive})=>  (" capitalize my-2 flex flex-col ") + (isActive?ActiveLink:NormalLink) }>
              {link.name}
  </NavLink>

Answer 7

Answer №4

Implementing dark/light mode toggle with NextJs and Tailwind: My Solution

    //CustomActiveLink.js
        import { useRouter } from 'next/router';
        import Link from 'next/link';
        import PropTypes from 'prop-types';
        import { useTheme } from 'next-themes';
        
        
        const CustomActiveLink = ({ href, children, ...rest }) => {
            const router = useRouter();
            const { theme, systemTheme } = useTheme();
            const useLoaded = () => {
               const [loaded, setLoaded] = useState(false);
               useEffect(() => setLoaded(true), []);
               return loaded;
            };
            const mounted = useLoaded();
        
            const isActive = router.asPath === href;
    const currentTheme =
            mounted && theme !== undefined && theme === 'system' ? systemTheme : theme;
        
            const activeLinkBgColor =
                currentTheme === 'dark'
                    ? 'bg-gray-700 text-white'
                    : 'bg-blue-600 text-white';
        
            const themeBgHover =
                currentTheme === 'dark'
                    ? 'hover:bg-gray-700 hover:text-white'
                    : 'hover:bg-blue-600 hover:text-white ';
        
            const activeLinkAndNotActiveColor = isActive
                ? activeLinkBgColor
                : `text-gray-300 ${themeBgHover}`;
        
            const className = `${activeLinkAndNotActiveColor} px-3 py-2 rounded-md text-sm font-medium`;
        
            return (
                <Link href={href} passHref {...rest}>
                    <a className={className} aria-current={isActive ? 'page' : undefined}>
                        {children}
                    </a>
                </Link>
            );
        };
        
        CustomActiveLink.propTypes = {
            href: PropTypes.string.isRequired,
        };   
        
        
        export default CustomActiveLink;

// Example of usage
 <CustomActiveLink href='/about'> About </CustomActiveLink>

Check out the results here: https://i.sstatic.net/XO6eo.jpg https://i.sstatic.net/3rW7E.jpg

Best of luck.

Answer 8

Implementing dark/light mode toggle with NextJs and Tailwind: My Solution

    //CustomActiveLink.js
        import { useRouter } from 'next/router';
        import Link from 'next/link';
        import PropTypes from 'prop-types';
        import { useTheme } from 'next-themes';
        
        
        const CustomActiveLink = ({ href, children, ...rest }) => {
            const router = useRouter();
            const { theme, systemTheme } = useTheme();
            const useLoaded = () => {
               const [loaded, setLoaded] = useState(false);
               useEffect(() => setLoaded(true), []);
               return loaded;
            };
            const mounted = useLoaded();
        
            const isActive = router.asPath === href;
    const currentTheme =
            mounted && theme !== undefined && theme === 'system' ? systemTheme : theme;
        
            const activeLinkBgColor =
                currentTheme === 'dark'
                    ? 'bg-gray-700 text-white'
                    : 'bg-blue-600 text-white';
        
            const themeBgHover =
                currentTheme === 'dark'
                    ? 'hover:bg-gray-700 hover:text-white'
                    : 'hover:bg-blue-600 hover:text-white ';
        
            const activeLinkAndNotActiveColor = isActive
                ? activeLinkBgColor
                : `text-gray-300 ${themeBgHover}`;
        
            const className = `${activeLinkAndNotActiveColor} px-3 py-2 rounded-md text-sm font-medium`;
        
            return (
                <Link href={href} passHref {...rest}>
                    <a className={className} aria-current={isActive ? 'page' : undefined}>
                        {children}
                    </a>
                </Link>
            );
        };
        
        CustomActiveLink.propTypes = {
            href: PropTypes.string.isRequired,
        };   
        
        
        export default CustomActiveLink;

// Example of usage
 <CustomActiveLink href='/about'> About </CustomActiveLink>

Check out the results here: https://i.sstatic.net/XO6eo.jpg https://i.sstatic.net/3rW7E.jpg

Best of luck.

Answer 9

Answer №5

To rid yourself of this issue once and for all, it's essential to expand the Tailwind modifier.

Begin by importing tailwindcss/plugin.
Next, extend the standard modifier via the plugin.
Implement the use of active:text-purple-500.

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  // ...
  plugins: [
      // ... some plugins,
      plugin(function({ addVariant }) {
        addVariant('active', ['&:active', '&.router-link-active'])
      })
  ],
}

<template>
  <NuxtLink
    class="active:text-purple-500"
  >
    <slot></slot>
  </NuxtLink>
</template>

This method offers several advantages:

Avoid errors when expanding the codebase, as you no longer need to worry about customizing the active state.
Facilitate the migration of components between projects.

Answer 10

To rid yourself of this issue once and for all, it's essential to expand the Tailwind modifier.

Begin by importing tailwindcss/plugin.
Next, extend the standard modifier via the plugin.
Implement the use of active:text-purple-500.

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  // ...
  plugins: [
      // ... some plugins,
      plugin(function({ addVariant }) {
        addVariant('active', ['&:active', '&.router-link-active'])
      })
  ],
}

<template>
  <NuxtLink
    class="active:text-purple-500"
  >
    <slot></slot>
  </NuxtLink>
</template>

This method offers several advantages:

Avoid errors when expanding the codebase, as you no longer need to worry about customizing the active state.
Facilitate the migration of components between projects.

The color of active links in TailwindCSS remains unchanged

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Encountered an error while running npm run dev on a NextJS application due to an

Tips for running a dry default with Angular CLI

Using Angular 7 shared service to allow sibling components to exchange data between each other

Looping Feature in Ionic Framework's Slides Component

Utilize HTTPS and HTTP with Express framework in node.js

Tips on displaying a navbar only when the user starts scrolling

Modifying the content within a DIV element

Efficiently transmitting WebSockets events/messages to multiple controllers in AngularJS

Tips for showcasing JSON data within an array of objects

Trouble accessing Strapi CMS data on Next.js frontend using React.js

Utilizing the "return" keyword in Javascript outside of function declarations

Display information using an ASP.Net barcode scanner

Adding a JSON file to an Angular app hosted on a Grunt server

Bootstrap navigation bar collapsing horizontally instead of vertically

How can I adjust the Bootstrap container width without it changing when resizing the browser window?

From Ruby to Javascript: Solving the Challenges of Date Calculation

What could be causing my media query to not function properly?

What is the best way to position an image in the center over a video using HTML and CSS?

Function is raising an error with the wrong value or text

HTML form not compatible with POST method in MVC